<template>
  <div class="container">
    <div class="main" v-show="!isShow">
      <div class="left-content">
        <div class="item-content" style="height: 415px;margin: 40px;">
          <div class="item-title">
            <div class="title">桥区概览</div>            
          </div>
          <div class="flex" style="margin-top: 8px;">
            <div class="item" style="width: 49%;margin-right: 2%;">
              <div class="top">
                <div class="title">整体情况</div>
              </div>
              <div class="part">
                <div class="left-part">
                  <div class="left-part-item" style="margin: 31px 0px;">
                    <div class="img-icon">
                      <img src="../assets/images/big-screen/img-icon-one.png" alt="">
                    </div>
                    <div class="count">
                      <div class="name">航道里程数(公里)</div>
                      <div class="value">{{ bgAndWyData.hdMile || "--" }}</div>
                    </div>                    
                  </div>
                  <div class="left-part-item">
                    <div class="img-icon">
                      <img src="../assets/images/big-screen/img-icon-two.png" alt="">
                    </div>
                    <div class="count">
                      <div class="name">桥梁数量(座)</div>
                      <div class="value">{{ bgAndWyData.totalBridge || "--" }}</div>
                    </div>                    
                  </div>
                </div>
                <div class="right-part">
                  <div class="part-item">
                    <div>
                      <div class="name">高等级</div>
                      <div class="value">{{ bgAndWyData.hdHighLevel || "--" }}</div>
                    </div>       
                    <div>
                      <div class="name">等级</div>
                      <div class="value">{{ bgAndWyData.hdOtherLevel || "--" }}</div>
                    </div>             
                  </div>
                  <div class="part-item">
                    <div>
                      <div class="name">高等级航道</div>
                      <div class="value">{{ bgAndWyData.bgHighLevel || "--" }}</div>
                    </div>
                    <div>
                      <div class="name">等级航道</div>
                      <div class="value">{{ bgAndWyData.bgOtherLevel || "--" }}</div>
                    </div>
                  </div>
                  <div class="part-item">
                    <div>
                      <div class="name">高等级航道</div>
                      <div class="value" style="color: #28CE8E;">
                        {{ bgAndWyData.bgDabiaoHighLevel || "--" }}<span style="font-size: 14px;">（净空达标）</span></div>
                    </div>
                    <div>
                      <div class="name">高等级航道</div>
                      <div class="value" style="color: #F13939;">
                        {{ bgAndWyData.bgNoDabiaoHighLevel || "--" }}<span style="font-size: 14px;">（净空不达标）</span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="item" style="width: 49%;">
              <div class="top">
                <div class="title">隐患桥梁情况</div>
              </div>
              <div style="display: flex;">
                <div class="bridge-accident" style="width: 58%;margin-right: 2%;">
                  <div v-if="cityDivisionData.length">
                    <div class="bridge-accident-item" v-for="(item,index) in cityDivisionData" :key="index">
                      <div class="top-part">
                        <div class="name">{{ item.city }}</div>
                        <div class="value">{{ item.cityNumber }}</div>
                      </div>
                      <div class="bottom-part">
                        <el-progress :percentage="item.cityNumber" color="#78DFFF" :show-text="false"></el-progress>
                      </div>
                    </div>
                  </div>
                  <div class="no-data" v-else>暂无数据</div>
                </div>
                <div class="watershed" style="width: 40%;">
                  <div class="watershed-title">按流域划分</div>
                  <div id="ninth-chart" style="height: 240px;"></div>
                </div>
              </div>              
            </div>
            <!-- <div class="item" style="width: 49%;">
              <div class="top">
                <div class="title">事故桥梁情况</div>
                <el-select
                  v-model="accident"
                  placeholder="请选择"
                  @change="accidentChange()"                   
                >
                  <el-option
                    v-for="item in accidentOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div class="bridge-accident">
                <div v-if="accidentData.length">
                  <div class="bridge-accident-item" v-for="(item,index) in accidentData" :key="index">
                    <div class="top-part">
                      <div class="name">{{ item.name }}</div>
                      <div class="value">{{ item.value }}</div>
                    </div>
                    <div class="bottom-part">
                      <el-progress :percentage="item.progress" color="#78DFFF" :show-text="false"></el-progress>
                    </div>
                  </div>
                </div>
                <div class="no-data" v-else>暂无数据</div>
              </div>              
            </div> -->
          </div>
        </div>
        <div class="item-content" style="height: 625px;margin: 0px 40px 40px 40px;">
          <div class="item-title">
            <div class="title">桥区日常管理</div>
            <div style="display: flex;align-items: center;">
              <el-select
                v-model="bridge"
                filterable
                placeholder="请选择"   
                style="margin: 0 20px;"
                @change="bridgeChange"                
              >
                <el-option
                  v-for="item in bridgeOptions"
                  :key="item.name"
                  :label="item.name"
                  :value="item.name"
                />
              </el-select>
              <el-radio-group v-model="radio" style="margin: 0 20px;">
                <el-radio-button label="桥梁信息" value="桥梁信息" />
                <el-radio-button label="桥区航道" value="桥区航道" />
                <el-radio-button label="船舶通航" value="船舶通航" />                                
              </el-radio-group>   
            </div>
          </div>
          <div class="flex" v-show="radio === '桥梁信息'">           
            <div class="item" style="margin: 0px 1.33% 20px 0px;">
              <div class="top1">
                <div class="title">基本信息</div>
              </div>
              <div class="bridge-img">
                <img :src="picUrl" v-if="picUrl" @error="imgError">
                <div class="no-img" v-else>
                  <img src="../assets/images/big-screen/no-data.png">
                  <div>暂无图片</div>
                </div>
              </div>
              <div class="base-info">
                <div class="left-info">
                  <div class="name">{{ bridgeBaseInfoData.bridgeName || "--" }}</div>
                  <div class="address">地理位置：{{ bridgeBaseInfoData.cAddress || "--" }}</div>
                </div>
                <div class="right-info">
                  <div class="name">净高是否达标：</div>
                  <div 
                    class="value"
                    :style="bridgePortraitData?.isDabiao === '不达标' ? 'color:#F13939;':''"
                  >
                    {{ bridgePortraitData?.isDabiao || "--" }}
                  </div>
                </div>
              </div>             
            </div>
            <div class="item" style="margin: 0px 1.33% 20px 0px;">
              <div class="top1">
                <div class="title">通航孔</div>
                <div class="tips">国家1985高程基准</div>
              </div>
              <div class="hole-count">
                <div class="hole-item">
                  <div class="name">单向/双向通行</div>
                  <div class="value" v-if="tonghangkong.length">
                    {{ tonghangkong[0]?.tonghangkGz || "--" }}/{{ tonghangkong[1]?.tonghangkGz || "--" }}
                  </div>
                  <div class="value" v-else>--/--</div>
                </div>
                <div class="hole-item">
                  <div class="name">通航孔数量</div>
                  <div class="value">{{ bridgeHoleData.tonghangnum || "--" }}个</div>
                </div>                
                <div class="hole-item">
                  <div class="name">设计最高通航水位</div>
                  <div class="value">{{ bridgeHoleData.shejizuigao || "--" }}m</div>
                </div>                
                <div class="hole-item">
                  <div class="name">实时通航净高</div>
                  <div class="value">{{ bridgeHoleData.shicetongh || "--" }}m</div>
                </div>                
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 20px 0px;">
              <div class="top1">
                <div class="title">桥区船舶密度</div>
                <!-- <div class="tips">数据时间：xxxx年xx月xx日</div> -->
              </div>
              <div id="first-chart" style="height: 220px;width: 480px;"></div>
            </div>
            <div class="item" style="margin: 0px 1.33% 28px 0px;">
              <div class="top1">
                <div class="title">水位情况</div>
                <div class="tips">国家1985高程基准</div>
              </div>
              <div class="water-details">
                <div class="top-details">
                  <el-select
                    v-model="water"
                    placeholder="请选择"   
                    style="width: 180px;"   
                    @change="waterPredictFn()"             
                  >
                    <el-option
                      v-for="item in waterOptions"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    />
                  </el-select>
                  <div class="update-time">更新时间：{{ bgWaterSitData?.time || "--" }}</div>
                </div> 
                <div class="bottom-details">
                  <div class="water-value">实时水位：{{ bgWaterSitData?.swz || "--" }}米</div>  
                  <div class="count">
                    <div class="count-item">
                      <div class="name">较上月最高(米)</div>
                      <div 
                        class="value"
                        :style="nLastmonthHighWater? nLastmonthHighWater>0?'color:#28CE8E':'color:#F86220' : 'color:#FFFFFF'"
                      >
                        {{ nLastmonthHighWater? nLastmonthHighWater : "--" }}
                        <img 
                          src="../assets/images/big-screen/down-sanjiao.png" 
                          v-show="nLastmonthHighWater && nLastmonthHighWater > 0"
                        >
                        <img 
                          src="../assets/images/big-screen/top-sanjiao.png" 
                          v-show="nLastmonthHighWater && nLastmonthHighWater < 0"
                        >
                      </div>
                    </div>
                    <div class="count-item">
                      <div class="name">较去年最高(米)</div>
                      <div 
                        class="value"
                        :style="nLastyearHighWater? nLastyearHighWater>0?'color:#28CE8E':'color:#F86220' : 'color:#FFFFFF'"
                      >
                        {{ nLastyearHighWater? nLastyearHighWater : "--" }}
                        <img 
                          src="../assets/images/big-screen/down-sanjiao.png" 
                          v-show="nLastyearHighWater && nLastyearHighWater > 0"
                        >
                        <img 
                          src="../assets/images/big-screen/top-sanjiao.png" 
                          v-show="nLastyearHighWater && nLastyearHighWater < 0"
                        >
                      </div>
                    </div>
                    <div class="count-item">
                      <div class="name">较历史最高(米)</div>
                      <div 
                        class="value"
                        :style="nHisHighWater? nHisHighWater>0?'color:#28CE8E':'color:#F86220' : 'color:#FFFFFF'"
                        >
                        {{ nHisHighWater? nHisHighWater : "--" }}
                        <img 
                          src="../assets/images/big-screen/down-sanjiao.png" 
                          v-show="nHisHighWater && nHisHighWater > 0"
                        >
                        <img 
                          src="../assets/images/big-screen/top-sanjiao.png" 
                          v-show="nHisHighWater && nHisHighWater < 0"
                        >
                      </div>
                    </div>
                  </div>                
                </div>               
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 28px 0px;">
              <div class="top1">
                <div class="title">预警情况</div>
                <div style="display: flex;align-items: center;">
                  <div class="tips">国家1985高程基准</div>
                  <el-radio-group v-model="radio8" style="margin-left: 10px;">
                    <el-radio-button label="偏航" value="偏航" />
                    <el-radio-button label="超高" value="超高" />
                    <el-radio-button label="超速" value="超速" />             
                  </el-radio-group>  
                </div>                
              </div>
              <div id="second-chart1" style="height: 220px;width: 488px;position: relative;" v-show="radio8 === '偏航'">
              </div>
              <div id="second-chart2" style="height: 220px;width: 488px;position: relative;" v-show="radio8 === '超高'">
              </div>
              <div id="second-chart3" style="height: 220px;width: 488px;position: relative;" v-show="radio8 === '超速'">
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 28px 0px;">
              <div class="top1">
                <div class="title">图纸/方案</div>
                <!-- <el-radio-group v-model="radio1">
                  <el-radio-button label="设计图纸" value="设计图纸" />
                  <el-radio-button label="一桥一方案" value="一桥一方案" />                                            
                </el-radio-group>  -->
              </div>
              <div class="blueprint">
                <div class="num">
                  <div class="num-item">
                    <div class="name">设计图纸(份)</div>
                    <div class="value">{{ bgElevationData.num }}</div>
                  </div>
                  <div class="num-item">
                    <div class="name">一桥一方案</div>
                    <div class="more" @click="viewPlan" v-if="planUrl">查看</div>
                    <div class="no" v-else>暂无</div>
                  </div>
                </div>
                <div class="blueprint-part">
                  <img src="../assets/images/big-screen/bridge-bg.png">
                </div>  
              </div>                       
            </div>
          </div>
          <div class="flex" v-show="radio === '桥区航道'">
            <div class="item" style="margin: 0px 1.33% 20px 0px;">
              <div class="top1">
                <div class="title">基本信息</div>
              </div>
              <div class="bridge-img">
                <img :src="picUrl" v-if="picUrl">
                <div class="no-img" v-else>
                  <img src="../assets/images/big-screen/no-data.png">
                  <div>暂无图片</div>
                </div>
              </div>
              <div class="base-info">
                <div class="left-info">
                  <div class="name">{{ waterwayBaseInfoData.channelName || "--" }}</div>
                  <div class="address">航标总数：{{ waterwayBaseInfoData.hbNum || "--" }}</div>
                </div>
                <div class="right-info">                  
                  <div class="value" style="color: #78DFFF;">{{ waterwayBaseInfoData.cWeihudj || "--" }}级</div>
                </div>
              </div>  
            </div>
            <div class="item" style="margin: 0px 1.33% 20px 0px;">
              <div class="top1">
                <div class="title">维护情况</div>
              </div>
              <div class="maintenance">
                <div class="maintenance-item">
                  <div class="img">
                    <img src="../assets/images/big-screen/img-icon-three.png" alt="">
                  </div>
                  <div>
                    <div class="name">维护水深(米)</div>
                    <div class="value">{{ waterwayBaseInfoData.weihuDeep || "--" }}</div>
                  </div>
                </div>
                <div class="maintenance-item">
                  <div class="img">
                    <img src="../assets/images/big-screen/img-icon-five.png" alt="">
                  </div>
                  <div>
                    <div class="name">维护弯曲半径(米)</div>
                    <div class="value">{{ waterwayBaseInfoData.wanquRadius || "--" }}</div>
                  </div>
                </div>
                <div class="maintenance-item">
                  <div class="img">
                    <img src="../assets/images/big-screen/img-icon-four.png" alt="">
                  </div>
                  <div>
                    <div class="name">维护宽度(米)</div>
                    <div class="value">{{ waterwayBaseInfoData.weihuWeigth || "--" }}</div>
                  </div>                    
                </div>                
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 20px 0px;">
              <div class="top1">
                <div class="title">水位情况</div>
                <div class="tips">国家1985高程基准</div>
              </div>
              <div class="water-details">
                <div class="top-details">
                  <el-select
                    v-model="water1"
                    placeholder="请选择"   
                    style="width: 180px;"
                    @change="waterChange1"                
                  >
                    <el-option
                      v-for="item in waterOptions1"
                      :key="item.point"
                      :label="item.point"
                      :value="item.point"
                    />
                  </el-select>
                  <div class="update-time">更新时间：{{ getNewWaterData?.time }}</div>
                </div> 
                <div class="bottom-details">
                  <div class="water-value">实时水位：{{ getNewWaterData?.swz }}米</div>  
                  <div class="count">
                    <div class="count-item">
                      <div class="name">较上月最高(米)</div>
                      <div 
                        class="value"
                        :style="nLastmonthHighWater1? nLastmonthHighWater1>0?'color:#28CE8E':'color:#F86220' : 'color:#FFFFFF'"
                      >
                        {{ nLastmonthHighWater1? nLastmonthHighWater1 : "--" }}
                        <img 
                          src="../assets/images/big-screen/down-sanjiao.png" 
                          v-show="nLastmonthHighWater1 && nLastmonthHighWater1 > 0"
                        >
                        <img 
                          src="../assets/images/big-screen/top-sanjiao.png" 
                          v-show="nLastmonthHighWater1 && nLastmonthHighWater1 < 0"
                        >
                      </div>
                    </div>
                    <div class="count-item">
                      <div class="name">较去年最高(米)</div>
                      <div 
                        class="value"
                        :style="nLastyearHighWater1? nLastyearHighWater1>0?'color:#28CE8E':'color:#F86220' : 'color:#FFFFFF'"
                      >
                        {{ nLastyearHighWater1? nLastyearHighWater1 : "--" }}
                        <img 
                          src="../assets/images/big-screen/down-sanjiao.png" 
                          v-show="nLastyearHighWater1 && nLastyearHighWater1 > 0"
                        >
                        <img 
                          src="../assets/images/big-screen/top-sanjiao.png" 
                          v-show="nLastyearHighWater1 && nLastyearHighWater1 < 0"
                        >
                      </div>
                    </div>
                    <div class="count-item">
                      <div class="name">较历史最高(米)</div>
                      <div 
                        class="value"
                        :style="nHisHighWater1? nHisHighWater1>0?'color:#28CE8E':'color:#F86220' : 'color:#FFFFFF'"
                        >
                        {{ nHisHighWater1? nHisHighWater1 : "--" }}
                        <img 
                          src="../assets/images/big-screen/down-sanjiao.png" 
                          v-show="nHisHighWater1 && nHisHighWater1 > 0"
                        >
                        <img 
                          src="../assets/images/big-screen/top-sanjiao.png" 
                          v-show="nHisHighWater1 && nHisHighWater1 < 0"
                        >
                      </div>
                    </div>
                  </div>                  
                </div>               
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 28px 0px;">
              <div class="top1">
                <div class="title">巡检情况</div>
              </div>
              <div class="inspect">
                <div class="img">
                  <img src="../assets/images/big-screen/img-icon-six.png" alt="">
                </div>
                <div>
                  <div class="name">巡检里程数(公里)</div>
                  <div class="value">{{ channelInspectionData.xcMile }}</div>
                </div>                
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 28px 0px;">
              <div class="top1">
                <div class="title">船舶流量</div>
              </div>
              <div class="flowed">
                <div class="top-part">
                  <div class="count-item">
                    <div class="name">3000吨以上船舶</div>
                    <div class="value">{{ hdCbllData.dayu || "--" }}</div>
                  </div>
                  <div class="count-item">
                    <div class="name">3000吨以下船舶</div>
                    <div class="value">{{ hdCbllData.xiaoyu || "--" }}</div>
                  </div>
                </div>
                <div class="bottom-part" v-if="hdCbllData.name">观测点：{{ hdCbllData.name }}</div>
              </div>
            </div>
            <div class="item" style="margin: 0px 1.33% 28px 0px;">
              <div class="top1">
                <div class="title">关联桥梁</div>
              </div>
              <div class="correlation">
                <div class="value">{{ associationBgData.num || "--" }}座</div>
              </div>
            </div>
          </div>
          <div class="flex" v-show="radio === '船舶通航'">
            <div class="item" style="width: 49%;height: 238px;margin-right: 2%;">
              <div class="top">
                <div class="title">船舶总体态势分析</div>
                <el-radio-group v-model="radio2" @change="radio2Change">
                  <el-radio-button label="当日" value="当日" />
                  <el-radio-button label="当周" value="当周" />   
                  <el-radio-button label="当月" value="当月" />
                  <el-radio-button label="当年" value="当年" />                                            
                </el-radio-group> 
              </div>
              <div style="display: flex;align-items: center;">
                <div class="ship-count">
                  <div class="ship-count-item">
                    <div class="name">船舶总数(艘)</div>
                    <div class="value">{{ totalShip }}</div>
                  </div>
                  <div class="ship-count-item">
                    <div class="name">船舶总载货吨(万吨)</div>
                    <div class="value">{{ totalShipLoad }}</div>
                  </div>
                </div>
                <div id="third-chart" style="height: 190px;width: 300px;"></div>
              </div>
            </div>
            <div class="item" style="width: 49%;height: 238px;">
              <div class="top">
                <div class="title">船舶流量态势分析</div>
                <el-radio-group v-model="radio3" @change="shipllAnalysFn">
                  <el-radio-button label="日" value="日" />
                  <el-radio-button label="周" value="周" />   
                  <el-radio-button label="月" value="月" />
                  <el-radio-button label="年" value="年" />                                            
                </el-radio-group> 
                <el-select
                  v-model="count"
                  placeholder="请选择"   
                  style="margin: 0 20px;" 
                  @change="shipllAnalysFn"               
                >
                  <el-option
                    v-for="item in countOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div id="fourth-chart" style="height: 190px;width: 860px;position: relative;">
                <div id="no-data4" class="no-data">
                  <img src="../assets/images/big-screen/no-data.png">
                  <div class="text">暂无数据</div>
                </div>
              </div>
            </div>
            <div class="item" style="width: 49%;height: 238px;margin-right: 2%;">
              <div class="top">
                <div class="title">观测船舶流量趋势及预测图</div>   
                <el-radio-group v-model="radio4" @change="shipTrendFn('流量')">
                  <el-radio-button label="日" value="日" /> 
                  <el-radio-button label="月" value="月" />                                          
                </el-radio-group>              
              </div>
              <div id="fifth-chart" style="height: 236px;width: 760px;"></div>
            </div>
            <div class="item" style="width: 49%;height: 238px;">
              <div class="top">
                <div class="title">观测船舶吨位趋势及预测图</div>
                <el-radio-group v-model="radio5" @change="shipTrendFn('吨位')">
                  <el-radio-button label="日" value="日" /> 
                  <el-radio-button label="月" value="月" />                                          
                </el-radio-group> 
              </div>
              <div id="sixth-chart" style="height: 236px;width: 760px;"></div>
            </div>
          </div>
        </div>
      </div>
      <div class="middle-content">
        <OlArc ref="OlArcRef" @updateBridge="handleUpdateBridge"></OlArc>
        <div class="special-topic">
          <div class="topic" @click="router.push({ path: '/traffic-channel/pre-yth/szsy/big-screen/bigScreen' })">数字水运</div>
          <div class="topic" @click="router.push({ path: '/traffic-channel/pre-yth/szsy/big-screen/bigScreenZhaba' })">闸坝智能调度与安全监测</div>
          <div class="topic-active">水上桥区管控</div>
          <div class="topic" @click="isShow = true">琼州海峡保畅通系统联动</div>
        </div>
        <div class="legend">          
          <div class="legend-item">
            <img src="../assets/images/big-screen/jg-budabiao.png" alt="">
            <div>净高不达标桥梁</div>
          </div>  
          <div class="legend-item">
            <img src="../assets/images/big-screen/jg-dabiao.png" alt="">
            <div>净高达标桥梁</div>
          </div>    
          <div class="legend-item">
            <img src="../assets/images/big-screen/hidden-trouble.png" alt="">
            <div>隐患桥梁</div>
          </div> 
          <div class="legend-item">
            <img src="../assets/images/big-screen/high-terminal.png" alt="">
            <div>桥梁净高终端</div>
          </div> 
        </div>
        <div class="count">
          <div class="count-item" style="margin-right: 26px;">
            <div class="name">航道里程路(公里)</div>
            <div class="value">{{ bgAndWyData.hdMile || "--" }}</div>
          </div>
          <div class="count-item">
            <div class="name">桥梁数量(座)</div>
            <div class="value">{{ bgAndWyData.totalBridge || "--" }}</div>
          </div>
        </div>
        <div class="filter">
          <div class="filter-title" @click="isShowFilter = !isShowFilter">
            <div>筛选</div>
            <img src="../assets/images/big-screen/icon-shouqi.png" v-if="!isShowFilter">
            <img src="../assets/images/big-screen/icon-zhankai.png" v-else>
          </div>
          <div v-show="isShowFilter">
            <div class="filter-item">
              <el-checkbox
                v-model="checkAll1"
                :indeterminate="isIndeterminate1"
                @change="handleCheckAllChange1"                
              >
                内河高等级航道
              </el-checkbox>
              <el-checkbox-group
                v-model="checkedValues1"
                @change="handleCheckedChange1" 
                style="display: flex;flex-direction: column;margin-left: 20px;"               
              >
                <el-checkbox
                  v-for="item in options1"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="checkAll2"
                :indeterminate="isIndeterminate2"
                @change="handleCheckAllChange2"
              >
                内河4-7等级航道
              </el-checkbox>
              <el-checkbox-group
                v-model="checkedValues2"
                @change="handleCheckedChange2"
                style="display: flex;flex-direction: column;margin-left: 20px;"
              >
                <el-checkbox
                  v-for="item in options2"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="nhdwhd"   
                @change="handleSure"           
              >
                内河等外航道
              </el-checkbox>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="checkAll3"
                :indeterminate="isIndeterminate3"
                @change="handleCheckAllChange3"
              >
                通航净高达标情况
              </el-checkbox>
              <el-checkbox-group
                v-model="checkedValues3"
                @change="handleCheckedChange3"
                style="display: flex;flex-direction: column;margin-left: 20px;"
              >
                <el-checkbox
                  v-for="item in options3"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="checkAll4"
                :indeterminate="isIndeterminate4"
                @change="handleCheckAllChange4"
              >
                事故桥梁
              </el-checkbox>
              <el-checkbox-group
                v-model="checkedValues4"
                @change="handleCheckedChange4"
                style="display: flex;flex-direction: column;margin-left: 20px;"
              >
                <el-checkbox
                  v-for="item in options4"
                  :key="item"
                  :label="item"
                  :value="item"
                >
                  {{ item }}
                </el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="hiddenTrouble"     
                @change="hiddenTroubleFn"            
              >
                隐患桥梁
              </el-checkbox>
            </div>
            <div class="filter-item">
              <el-checkbox
                v-model="highTerminal"     
                @change="highTerminalFn"            
              >
                桥梁净高终端
              </el-checkbox>
            </div>
          </div>
        </div>        
      </div>
      <div class="right-content">
        <div class="item-content" style="height: 520px;margin: 40px;">
          <div class="item-title">
            <div class="title">中山先行示范区</div>    
            <el-select
              v-model="bridge1"
              filterable
              placeholder="请选择"   
              style="margin: 0 20px;" 
              @change="bridgeChange1"               
            >
              <el-option
                v-for="item in bridgeOptions1"
                :key="item.name"
                :label="item.name"
                :value="item.name"
              />
            </el-select>        
          </div>
          <div class="flex">           
            <div class="item" style="width: 27%;margin-right: 20px;">
              <div class="top1">
                <div class="title">桥梁基本信息</div>
              </div>
              <div class="base-info">
                <div class="bridge-img">
                  <img :src="picUrl1" v-if="picUrl1" @error="imgError1">
                  <div class="no-img" v-else>
                    <img src="../assets/images/big-screen/no-data.png">
                    <div>暂无图片</div>
                  </div>
                </div>
                <div class="bridge-name">{{ bridgeBaseInfoData1?.bridgeName || "--" }}</div>
                <div class="channel-info">
                  <div>所属航道：{{ bridgeBaseInfoData1?.cHangdao || "--" }}</div>
                  <div>{{ bridgeBaseInfoData1?.cAddress || "--" }}</div>
                </div>
                <div class="condition">
                  <div class="condition-item">
                    通航净宽
                    <img src="../assets/images/big-screen/dabiao-icon.png" v-if="wide === '是'">
                    <img src="../assets/images/big-screen/budabiao-icon.png" v-else>
                  </div>
                  <div class="condition-item">
                    通航净高
                    <img src="../assets/images/big-screen/dabiao-icon.png" v-if="high === '是'">
                    <img src="../assets/images/big-screen/budabiao-icon.png" v-else>
                  </div>
                  <div class="condition-item">
                    设标情况
                    <img src="../assets/images/big-screen/dabiao-icon.png" v-if="shebiao === '是'">
                    <img src="../assets/images/big-screen/budabiao-icon.png" v-else>
                  </div>
                </div>
              </div>
            </div>
            <div class="item" style="width: 39.66%;margin-right: 20px;">
              <div class="top1">
                <div class="title">航保信息</div>
                <el-radio-group v-model="radio6">
                  <el-radio-button label="通航孔" value="通航孔" />
                  <el-radio-button label="预警情况" value="预警情况" />
                  <el-radio-button label="水位情况" value="水位情况" />   
                  <el-radio-button label="风速情况" value="风速情况" />
                  <el-radio-button label="能见度情况" value="能见度情况" />                             
                </el-radio-group> 
              </div>
              <div class="hole-info" v-show="radio6 == '通航孔'">
                <div class="hole-item">
                  <div class="name">单向/双向通行</div>
                  <div class="value" v-if="tonghangkong1.length">
                    {{ tonghangkong1[0]?.tonghangkGz || "--" }}/{{ tonghangkong1[1]?.tonghangkGz || "--" }}
                  </div>
                  <div class="value" v-else>--/--</div>
                </div>
                <div class="hole-item">
                  <div class="name">通航孔数量</div>
                  <div class="value">{{ bridgeHoleData1.tonghangnum || "--" }}个</div>
                </div>
                <div class="hole-item">
                  <div class="name">设计最高通航水位</div>
                  <div class="value">{{ bridgeHoleData1.shejizuigao || "--" }}m</div>
                </div>
                <div class="hole-item">
                  <div class="name">实时通航净高</div>
                  <div class="value">{{ bridgeHoleData1.shicetongh || "--" }}m</div>
                </div>
                <div class="tips">国家1985高程基准</div>
              </div>
              <div class="warning-situation" v-show="radio6 == '预警情况'">
                <div class="situation-item">
                  <div class="value">{{ yawStatisticsData1.chaogaoAlarm }}</div>
                  <img src="../assets/images/big-screen/warning-bg.png" alt="">
                  <div class="name">超高统计</div>
                </div>
                <div class="situation-item">
                  <div class="value">{{ yawStatisticsData1.chaosuAlarm }}</div>
                  <img src="../assets/images/big-screen/warning-bg.png" alt="">
                  <div class="name">超速统计</div>
                </div>
                <div class="situation-item">
                  <div class="value">{{ yawStatisticsData1.pianhangAlarm }}</div>
                  <img src="../assets/images/big-screen/warning-bg.png" alt="">
                  <div class="name">偏航统计</div>
                </div>
              </div>
              <div class="water-situation" v-show="radio6 == '水位情况'">
                <div class="water-item">
                  <img src="../assets/images/big-screen/water-level-icon.png" alt="">
                  <div>
                    <div class="name">实时水位(m)</div>
                    <div class="value">
                      <span>{{ bgWaterSitData1.swz || "--" }}</span>
                      <span class="actual">实时</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="water-situation" v-show="radio6 == '风速情况'">
                <div id="lineChart1" style="width: 480px;height: 350px;"></div>
              </div>
              <div class="water-situation" v-show="radio6 == '能见度情况'">
                <div id="lineChart2" style="width: 480px;height: 350px;"></div>
              </div>
            </div>
            <div class="item" style="width: 33.33%;">
              <div class="top1">
                <div class="title">通航情况</div>               
                <el-select
                  v-model="count1"
                  placeholder="请选择"   
                  style="width:150px;"  
                  @change="shipllAnalysFn1"              
                >
                  <el-option
                    v-for="item in countOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
                 <el-radio-group v-model="radio7" @change="shipllAnalysFn1">
                  <el-radio-button label="日" value="日" />
                  <el-radio-button label="周" value="周" />   
                  <el-radio-button label="月" value="月" />
                  <el-radio-button label="年" value="年" />                                            
                </el-radio-group> 
              </div>
              <div id="seventh-chart" style="height: 380px;width: 100%;position: relative;">
                <div id="no-data">
                  <img src="../assets/images/big-screen/no-data.png">
                  <div class="text">暂无数据</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="item-content" style="height: 520px;margin: 0px 40px 40px 40px;">
          <div class="item-title">
            <div class="title">事故案例情况</div>            
          </div>
          <div class="flex"> 
            <div class="item" v-show="!showAccidentList" style="width: 49%;margin-right: 2%;">
              <div class="top">
                <div class="title">
                  辖区事故概况
                  <el-tooltip
                    effect="dark"
                    content="
                      事故等级根据人员伤亡数量和污染数量根据以下标准自动生成(后续执法人员可结合实际经济损失在“事故报告”中进行修改)：
                      (一)特别重大事故，指造成30 人以上死亡(含失踪)的，或者100 人以上重伤的，或者船舶溢油1000 吨以上致水域污染的，或者1亿元以上直接经济损失的事故；
                      (二)重大事故，指造成10 人以上30 人以下死亡(含失踪)的，或者50 人以上100 人以下重伤的，或者船舶溢油500 吨以上1000 吨以下致水域污染的，或者5000 万元以上1 亿元以下直接经济损失的事故；
                      (三)较大事故，指造成3 人以上10 人以下死亡(含失踪)的,或者10 人以上50 人以下重伤的，或者船舶溢油100 吨以上500 吨以下致水域污染的，或者1000 万元以上5000 万元以下直接经济损失的事故；
                      (四)一般事故，指造成1 人以上3 人以下死亡(含失踪)的，或者1 人以上10 人以下重伤的或者船舶溢油1 吨以上100 吨以下致水域污染的，或者100 万元以上1000 万元以下直接经济损失的事故。
                    "
                    placement="bottom"
                  >
                    <img src="../assets/images/big-screen/tips.png" alt="">
                  </el-tooltip>
                </div>
                <el-select
                  v-model="year"
                  placeholder="请选择"   
                  @change="yearChange"              
                >
                  <el-option
                    v-for="item in yearOptions"
                    :key="item.year"
                    :label="item.year"
                    :value="item.year"
                  />
                </el-select>
              </div>
              <div class="recently">
                最近事故时间：<span>{{ recentTime }}</span>
              </div>
              <div 
                id="eighth-chart" 
                style="height: 300px;width: 100%;"
                @click="showAccidentList = true;"
              ></div>
            </div>
            <div class="item" v-show="showAccidentList" style="width: 49%;margin-right: 2%;">
              <div class="top">
                <div class="title">事故列表</div>
                <div class="back" @click="showAccidentList = false;">
                  <img src="../assets/images/big-screen/back-btn.png" alt="">
                </div>
              </div>
              <div class="table">
                <el-table :data="tableData">
                  <el-table-column prop="accidentBg" label="事故桥梁" />           
                  <el-table-column prop="accidentShip" label="事故船舶" />    
                  <el-table-column prop="accidentHd" label="事故航道" />    
                  <el-table-column prop="accidentLevel" label="事故等级" />    
                  <el-table-column prop="happenDate" label="发生时间" width="180" />         
                </el-table>
              </div>
            </div>
            <div class="item" style="width: 49%;">
              <div class="top">
                <div class="title">事故桥梁情况</div>
                <el-select
                  v-model="accident"
                  placeholder="请选择"
                  @change="accidentChange()"                   
                >
                  <el-option
                    v-for="item in accidentOptions"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  />
                </el-select>
              </div>
              <div class="bridge-accident">
                <div v-if="accidentData.length">
                  <div class="bridge-accident-item" v-for="(item,index) in accidentData" :key="index">
                    <div class="top-part">
                      <div class="name">{{ item.name }}</div>
                      <div class="value">{{ item.value }}</div>
                    </div>
                    <div class="bottom-part">
                      <el-progress :percentage="item.progress" color="#78DFFF" :show-text="false"></el-progress>
                    </div>
                  </div>
                </div>
                <div class="no-data" v-else>暂无数据</div>
              </div>              
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="my-iframe" v-if="isShow">
      <iframe 
        src="http://210.76.76.41/digital-port/big-screen/main/#/QZHX?token=e49f977c-4203-464a-92d1-50de3c1f34a5" 
        width="5760" 
        height="1200"
      ></iframe>
      <div class="close-btn" @click="isShow = false">返回</div>
    </div> 
  </div>
</template>

<script setup>
  import { ref, onMounted, nextTick } from 'vue';
  import { useRouter } from "vue-router";
  const router = useRouter();

  //引入Echarts
  import * as echarts from 'echarts/core';
  import { TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent } from 'echarts/components';
  import { PieChart, BarChart, LineChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';
  echarts.use([TooltipComponent, LegendComponent, GridComponent, DataZoomComponent, GraphicComponent, PieChart, BarChart, LineChart, CanvasRenderer]);

  //引入接口
  import {
    getBgAndWy, //整体情况
    rammedBridge, //桥梁事故情况
    cityDivision, //隐患桥梁情况-地市划分
    regionDivision, //隐患桥梁情况-流域划分
    getBridgeList, //获取桥梁列表
    bridgeBaseInfo, //桥梁基本信息
    bridgePortrait, //净高是否达标
    bridgeWaterwayRisk, //通航孔
    bgCbmdTrand, //桥区船舶密度    
    bgWaterSit, //水位情况
    waterPredict, //水位情况差值
    getBgPic, //获取桥梁图片
    bgElevation, //设计图纸
    bridgePlan, //一桥一方案
    waterwayBaseInfo, //桥区航道基本信息
    getWaterPoint, //桥区航道获取水位站点
    getNewWater, //桥区航道获取最新水位
    channelInspection, //桥区航道巡检情况
    hdCbll, //桥区航道船舶流量
    associationBg, //桥区航道关联桥梁
    shipTonAnalys, //船舶总体态势分析
    //船舶流量态势分析
    shipllAnalys,
    shipllAnalysWeek,
    shipllAnalysMonth,
    shipllAnalysYear,
    getCenterByBg, //获取事务中心
    shipTrend, //观测船舶流量、吨位趋势及预测图
    bgList, //中山先行示范区获取桥梁
    bridgePortraitZhongshan, //中山先行示范区桥梁画像
    yawStatistics, //中山先行示范区预警情况
    getYearList, //事故案例情况获取年份
    acciSit, //事故案例情况详情    
    windSpeed, //风速情况
    nengjiandu, //能见度情况
  } from "@/bridge-h5/utils/bridgeAreaControlApi";

  //地图
  import OlArc from "../components/olArcBigSizeScreen.vue";
  const OlArcRef = ref(null);

  import chartBg from "../assets/images/big-screen/chart-bg.png";
  import errorImg from "../assets/images/big-screen/no-data.png";

  //整体情况
  const bgAndWyData = ref({});
  const getBgAndWyFn = () => {
    getBgAndWy().then((res) => {
      if (res.code === 200 && res.data) {
        bgAndWyData.value = res.data;
      }
    })
  };

  //桥梁事故情况
  const accident = ref(3);
  const accidentOptions = [
    { name: "近三年被撞桥梁", value: 3 },
    { name: "近一年被撞桥梁", value: 1 },
  ];
  const accidentData = ref([]);
  const rammedBridgeFn = () => {
    rammedBridge({
      isAccident: accident.value
    }).then((res) => {
      if(res.code === 200 && res.data.length){
        accidentData.value = [];
        res.data.forEach((item) => {
          let obj = {
            name: item.bridgeName,
            value: item.times
          };
          if(item.times === 3){
            obj.progress = 100;
          }else if(item.times === 2){
            obj.progress = 66;
          }else if(item.times === 1){
            obj.progress = 33;
          }
          accidentData.value.push(obj);
        });       
      }else{
        accidentData.value = [];
      }
    });
  };
  const accidentChange = () => {
    rammedBridgeFn();
  };

  //隐患桥梁情况
  const cityDivisionData = ref([]);
  const cityDivisionFn = () => {
    cityDivision().then((res) => {
      if(res.code === 200 && res.data.length){
        cityDivisionData.value = res.data;
      }
    });
  };
  const regionDivisionFn = () => {
    regionDivision().then((res) => {
      if(res.code === 200){
        let regionDivisionData = [];
        let colorData = [
          '#78DFFF','#9AD4EF','#309CFF','#2B679D','#5057FD','#8083D8','#5AF5D5','#A6E7D9','#55FE5C','#9CDB9F',
          '#FFC733','#FFE6A5','#FE762A','#F9B793','#E33F3F','#F48787','#ED44F0','#F5ABF6','#41616A','#ADCDD6',
        ]; 
        res.data.forEach((item,index) => {
          let obj = {
            name: item.region,
            value: item.regionNumber,
            itemStyle: { 
              color: colorData[index]
            }
          };
          regionDivisionData.push(obj);
        });    
        initNinthChart(regionDivisionData);  
      }
    });
  };

  //桥区日常管理
  const radio = ref("桥梁信息");
  const bridge = ref("北斗大桥");
  const waterway = ref("沙湾水道");
  const bridgeOptions = ref([]);
  const getBridgeListFn = () => {
    getBridgeList().then((res) => {
      if(res.code === 200){
        bridgeOptions.value = res.data;
        //桥梁信息
        bridgeBaseInfoFn();
        bridgePortraitFn();
        bridgeWaterwayRiskFn();
        bgCbmdTrandFn();
        bgWaterSitFn();
        getWaterOptionsFn();
        yawStatisticsFn();
        getBgPicFn();
        bgElevationFn();
        bridgePlanFn();
        //桥区航道
        waterwayBaseInfoFn();
        getWaterPointFn();
        channelInspectionFn();
        hdCbllFn();
        associationBgFn();
        //船舶通航
        shipTonAnalysFn();
        shipllAnalysFn();
        getCenterByBgFn();
      }
    });
  };
  const bridgeChange = () => {
    //桥梁信息
    bridgeBaseInfoFn();
    bridgePortraitFn();
    bridgeWaterwayRiskFn();
    bgCbmdTrandFn();
    bgWaterSitFn();
    getWaterOptionsFn();
    yawStatisticsFn();
    getBgPicFn();
    bgElevationFn();
    bridgePlanFn();
    //桥区航道
    bridgeOptions.value.forEach((item) => {
      if(bridge.value === item.name){
        waterway.value = item.hangdao;
        waterwayBaseInfoFn();
        getWaterPointFn();
        channelInspectionFn();
        hdCbllFn();
        associationBgFn();
      }
    });
    //船舶通航
    shipTonAnalysFn();
    shipllAnalysFn();
    getCenterByBgFn();
  };
  const handleUpdateBridge = (val) => {
    bridge.value = val;
    setTimeout(() => {
      bridgeChange();
    }, 200);    
  };
  const bridgeBaseInfoData = ref({});
  const bridgeBaseInfoFn = () => {
    bridgeBaseInfo({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        bridgeBaseInfoData.value = res.data[0];
      }
    });
  };
  const bridgePortraitData = ref({});
  const bridgePortraitFn = () => {
    bridgePortrait({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        bridgePortraitData.value = res.data[0];
      }
    });
  };
  const bridgeHoleData = ref({});
  const tonghangkong = ref([]);
  const bridgeWaterwayRiskFn = () => {
    bridgeWaterwayRisk({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        bridgeHoleData.value = res.data;      
        tonghangkong.value = res.data.tonghangkong;  
      }
    });
  };
  const bgCbmdTrandFn = () => {
    bgCbmdTrand({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        initFirstChart(res.data);
      }
    });
  };
  const bgWaterSitData = ref({});
  const bgWaterSitFn = () => {
    bgWaterSit({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        bgWaterSitData.value = res.data[0];
      }
    });
  };
  const water = ref("");
  const waterOptions = ref([]);
  const getWaterOptionsFn = () => {
    getBridgeList({
      keyword: bridge.value
    }).then((res) => {
      if(res.code === 200){
        water.value = res.data[0].name;
        waterOptions.value = res.data;
        waterPredictFn();
      }
    });
  };
  const nLastmonthHighWater = ref(null);
  const nLastyearHighWater = ref(null);
  const nHisHighWater = ref(null);
  const waterPredictFn = () => {
    waterPredict({
      waterway: water.value
    }).then((res) => {
      if(res.code === 200){
        nLastmonthHighWater.value = res.data.nLastmonthHighWater;
        nLastyearHighWater.value = res.data.nLastyearHighWater;
        nHisHighWater.value = res.data.nHisHighWater;
      }
    });
  };
  const radio8 = ref("偏航");
  const yawStatisticsFn = () => {
    yawStatistics({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        initSecondChart1(res.data.pianhang);
        initSecondChart2(res.data.chaogao);
        initSecondChart3(res.data.chaosu);
      }
    });
  };
  const picUrl = ref("");
  const getBgPicFn = () => {
    getBgPic({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200 && res.data.picUrl){
        picUrl.value = `${import.meta.env.VITE_APP_BASE_API}attach` + res.data.picUrl;
      }else{
        picUrl.value = "";
      }
    });
  };
  const imgError = () => {
    picUrl.value = "";
  };
  const bgElevationData = ref({});
  const bgElevationFn = () => {
    bgElevation({
      bridge: bridge.value
    }).then((res) => {
      if (res.code === 200) {
        bgElevationData.value = res.data;
      }
    });
  };
  const planUrl = ref("");
  const bridgePlanFn = () => {
    bridgePlan({
      bridge: bridge.value
    }).then((res) => {
      if (res.code === 200 && res.data.url) {
        planUrl.value = `${import.meta.env.VITE_APP_BASE_API}` + res.data.url;
      } else {
        planUrl.value = "";
      }
    });
  };
  const viewPlan = () => {
    window.open(
      planUrl.value, 
      "_blank",
      "toolbar=yes,location=yes,directories=no,status=no,menubar=yes,scrollbars=yes,resizable=no,copyhistory=yes,width=600,height=600"
    )
  };
  const waterwayBaseInfoData = ref({});
  const waterwayBaseInfoFn = () => {
    waterwayBaseInfo({
      bridge: bridge.value,
      waterway: waterway.value
    }).then((res) => {
      if(res.code === 200){
        waterwayBaseInfoData.value = res.data;
      }
    });
  };
  const water1 = ref("");
  const waterOptions1 = ref([]);
  const getWaterPointFn = () => {
    getWaterPoint({
      waterway: waterway.value
    }).then((res) => {
      if(res.code === 200 && res.data.length){
        waterOptions1.value = res.data;
        water1.value = res.data[0].point;
        getNewWaterFn();
        waterPredictFn1();
      }else{
        waterOptions1.value = [];
        water1.value = "";
      }
    });
  };
  const getNewWaterData = ref({});
  const getNewWaterFn = () => {
    getNewWater({
      waterway: water1.value
    }).then((res) => {
      if(res.code === 200){
        getNewWaterData.value = res.data[0] || {};
      }
    });
  };
  const nLastmonthHighWater1 = ref(null);
  const nLastyearHighWater1 = ref(null);
  const nHisHighWater1 = ref(null);
  const waterPredictFn1 = () => {
    waterPredict({
      waterway: water1.value
    }).then((res) => {
      if(res.code === 200){
        nLastmonthHighWater1.value = res.data.nLastmonthHighWater;
        nLastyearHighWater1.value = res.data.nLastyearHighWater;
        nHisHighWater1.value = res.data.nHisHighWater;
      }
    });
  };
  const waterChange1 = () => {
    getNewWaterFn();
    waterPredictFn1();
  };
  const channelInspectionData = ref({});
  const channelInspectionFn = () => {
    channelInspection({
      waterway: waterway.value
    }).then((res) => {
      if(res.code === 200){
        channelInspectionData.value = res.data;
      }
    });
  };
  const hdCbllData = ref({});
  const hdCbllFn = () => {
    hdCbll({
      waterway: waterway.value
    }).then((res) => {
      if(res.code === 200){
        hdCbllData.value = res.data[0] || {};
      }
    });
  };
  const associationBgData = ref({});
  const associationBgFn = () => {
    associationBg({
      waterway: waterway.value
    }).then((res) => {
      if(res.code === 200){
        associationBgData.value = res.data;
      }
    });
  };
  
  const radio1 = ref("设计图纸");
  const radio2 = ref("当周");
  const totalShip = ref(0);
  const totalShipLoad = ref(0);
  const shipTonAnalysData = ref({});
  const shipTonAnalysFn = () => {
    shipTonAnalys({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        shipTonAnalysData.value = res.data;
        radio2Change();
      }
    });
  };
  const radio2Change = () => {
    let obj = {};
    if(radio2.value === "当日"){
      totalShip.value = shipTonAnalysData.value.today.totalShip;
      totalShipLoad.value = shipTonAnalysData.value.today.dw;
      obj = shipTonAnalysData.value.today;
    }else if(radio2.value === "当周"){
      totalShip.value = shipTonAnalysData.value.thisWeek.totalShip;
      totalShipLoad.value = shipTonAnalysData.value.thisWeek.dw;
      obj = shipTonAnalysData.value.thisWeek;
    }else if(radio2.value === "当月"){
      totalShip.value = shipTonAnalysData.value.thisMonth.totalShip;
      totalShipLoad.value = shipTonAnalysData.value.thisMonth.dw;
      obj = shipTonAnalysData.value.thisMonth;
    }else if(radio2.value === "当年"){
      totalShip.value = shipTonAnalysData.value.thisYear.totalShip;
      totalShipLoad.value = shipTonAnalysData.value.thisYear.dw;
      obj = shipTonAnalysData.value.thisYear;
    }
    initThirdChart(obj);
  };
  const radio3 = ref("周");
  const count = ref("1");
  const countOptions = [
    { name: "上下行船舶统计", value: "1" },
    { name: "空重载船舶统计", value: "2" },
  ];
  const shipllAnalysFn = () => {
    if(radio3.value === "日"){
      shipllAnalys({
        bridge: bridge.value,
        type: count.value
      }).then((res) => {
        if(res.code === 200 && res.data.length){          
          document.getElementById('no-data4').style.display = 'none';
          initFourthChart(res.data);
        }else{
          document.getElementById('no-data4').style.display = 'block';
        }  
      });
    }else if(radio3.value === "周"){
      shipllAnalysWeek({
        bridge: bridge.value,
        type: count.value
      }).then((res) => {
        if(res.code === 200 && res.data.length){          
          document.getElementById('no-data4').style.display = 'none';
          initFourthChart(res.data);
        }else{
          document.getElementById('no-data4').style.display = 'block';
        } 
      });
    }else if(radio3.value === "月"){
      shipllAnalysMonth({
        bridge: bridge.value,
        type: count.value
      }).then((res) => {
        if(res.code === 200 && res.data.length){          
          document.getElementById('no-data4').style.display = 'none';
          initFourthChart(res.data);
        }else{
          document.getElementById('no-data4').style.display = 'block';
        } 
      });
    }else if(radio3.value === "年"){
      shipllAnalysYear({
        bridge: bridge.value,
        type: count.value
      }).then((res) => {
        if(res.code === 200 && res.data.length){          
          document.getElementById('no-data4').style.display = 'none';
          initFourthChart(res.data);
        }else{
          document.getElementById('no-data4').style.display = 'block';
        } 
      });
    }
  };  
  const radio4 = ref("日");
  const radio5 = ref("日");
  const bmpName = ref("");
  const getCenterByBgFn = () => {
    getCenterByBg({
      bridge: bridge.value
    }).then((res) => {
      if(res.code === 200){
        bmpName.value = res.data[0].bmPname;
        shipTrendFn('全部');
      }
    });
  };
  const shipTrendFn = (val) => {
    shipTrend({
      bridge: bridge.value,
      bmpName: bmpName.value
    }).then((res) => {
      if(res.code === 200){
        if(val == "流量"){
          initFifthChart(res.data.ship);
        }else if(val == '吨位'){
          initSixthChart(res.data.tonnage);
        }else{
          initFifthChart(res.data.ship);
          initSixthChart(res.data.tonnage);
        }                
      }
    });
  };

  //筛选
  const isShowFilter = ref(false);
  const checkAll1 = ref(false);
  const isIndeterminate1 = ref(false);
  const checkedValues1 = ref([]);
  const options1 = ["一级","二级","三级"];
  const handleCheckAllChange1 = (val) => {
    hiddenTrouble.value = false;
    highTerminal.value = false;
    checkedValues1.value = val ? options1 : [];
    isIndeterminate1.value = false;    
    handleSure();
  };
  const handleCheckedChange1 = (value) => {
    hiddenTrouble.value = false;
    highTerminal.value = false;
    const checkedCount = value.length;
    checkAll1.value = checkedCount === options1.length;
    isIndeterminate1.value = checkedCount > 0 && checkedCount < options1.length;
    handleSure();
  };

  const checkAll2 = ref(false);
  const isIndeterminate2 = ref(false);
  const checkedValues2 = ref([]);
  const options2 = ["四级","五级","六级","七级"];
  const handleCheckAllChange2 = (val) => {
    hiddenTrouble.value = false;
    highTerminal.value = false;
    checkedValues2.value = val ? options2 : [];
    isIndeterminate2.value = false;
    handleSure();
  };
  const handleCheckedChange2 = (value) => {
    hiddenTrouble.value = false;
    highTerminal.value = false;
    const checkedCount = value.length;
    checkAll2.value = checkedCount === options2.length;
    isIndeterminate2.value = checkedCount > 0 && checkedCount < options2.length;
    handleSure();
  };

  const nhdwhd = ref(false);

  const checkAll3 = ref(false);
  const isIndeterminate3 = ref(false);
  const checkedValues3 = ref([]);
  const options3 = ["达标","不达标"];
  const handleCheckAllChange3 = (val) => {
    hiddenTrouble.value = false;
    highTerminal.value = false;
    checkedValues3.value = val ? options3 : [];
    isIndeterminate3.value = false;
    handleSure();
  };
  const handleCheckedChange3 = (value) => {
    hiddenTrouble.value = false;
    highTerminal.value = false;
    const checkedCount = value.length;
    checkAll3.value = checkedCount === options3.length;
    isIndeterminate3.value = checkedCount > 0 && checkedCount < options3.length;
    handleSure();
  };

  const checkAll4 = ref(false);
  const isIndeterminate4 = ref(false);
  const checkedValues4 = ref([]);
  const options4 = ["近三年被撞桥梁","近一年被撞桥梁"];
  const handleCheckAllChange4 = (val) => {
    hiddenTrouble.value = false;
    highTerminal.value = false;
    checkedValues4.value = val ? options4 : [];
    isIndeterminate4.value = false;
    handleSure();
  };
  const handleCheckedChange4 = (value) => {
    hiddenTrouble.value = false;
    highTerminal.value = false;
    const checkedCount = value.length;
    checkAll4.value = checkedCount === options4.length;
    isIndeterminate4.value = checkedCount > 0 && checkedCount < options4.length;
    handleSure();
  };

  const hiddenTrouble = ref(false);
  const highTerminal = ref(false);

  const hiddenTroubleFn = () => {
    if(hiddenTrouble.value){
      checkAll1.value = false;
      isIndeterminate1.value = false;
      checkedValues1.value = [];
      checkAll2.value = false;
      isIndeterminate2.value = false;
      checkedValues2.value = [];
      nhdwhd.value = false;
      checkAll3.value = false;
      isIndeterminate3.value = false;
      checkedValues3.value = [];
      checkAll4.value = false;
      isIndeterminate4.value = false;
      checkedValues4.value = [];
      highTerminal.value = false;
    }
    handleSure();
  };
  const highTerminalFn = () => {
    if(highTerminal.value){
      checkAll1.value = false;
      isIndeterminate1.value = false;
      checkedValues1.value = [];
      checkAll2.value = false;
      isIndeterminate2.value = false;
      checkedValues2.value = [];
      nhdwhd.value = false;
      checkAll3.value = false;
      isIndeterminate3.value = false;
      checkedValues3.value = [];
      checkAll4.value = false;
      isIndeterminate4.value = false;
      checkedValues4.value = [];
      hiddenTrouble.value = false;
    }
    handleSure();
  };

  const handleSure = () => {   
    let arr = checkedValues1.value.concat(checkedValues2.value);
    let isDabiao = [];
    let isAccident = [];
    if(nhdwhd.value === true){
      hiddenTrouble.value = false;
      highTerminal.value = false;
      arr.push("八级");
    };
    checkedValues3.value.forEach((item) => {
      if(item == "达标"){
        isDabiao.push(0);
      }else if(item == "不达标"){
        isDabiao.push(1);
      }
    });
    checkedValues4.value.forEach((item) => {
      if(item == "近三年被撞桥梁"){
        isAccident.push(3);
      }else if(item == "近一年被撞桥梁"){
        isAccident.push(1);
      }
    });
    OlArcRef.value.getPosInfoFn(
      {
        level: arr.join(','),
        isDabiao: isDabiao.join(','),
        isAccident: isAccident.join(',')      
      },
      hiddenTrouble.value,
      highTerminal.value
    );
  };

  //中山先行示范区
  const bridge1 = ref('中山港大桥');
  const bridgeOptions1 = ref([]);
  const bgListFn = () => {
    bgList().then((res) => {
      if(res.code === 200){
        bridgeOptions1.value = res.data;
        bridgeBaseInfoFn1();
        bridgePortraitZhongshanFn();
        getBgPicFn1();
        bridgeWaterwayRiskFn1();
        yawStatisticsFn1();
        bgWaterSitFn1();
        windSpeedFn();
        nengjianduFn();
        shipllAnalysFn1();
      }
    }); 
  };
  const bridgeChange1 = () => {
    bridgeBaseInfoFn1();
    bridgePortraitZhongshanFn();
    getBgPicFn1();
    bridgeWaterwayRiskFn1();
    yawStatisticsFn1();
    bgWaterSitFn1();
    windSpeedFn();
    nengjianduFn();
    shipllAnalysFn1();
  };
  const bridgeBaseInfoData1 = ref({});
  const bridgeBaseInfoFn1 = () => {
    bridgeBaseInfo({
      bridge: bridge1.value
    }).then((res) => {
      if(res.code === 200){
        bridgeBaseInfoData1.value = res.data[0];
      }
    });
  };
  const high = ref("");
  const shebiao = ref("");
  const wide = ref("");
  const bridgePortraitZhongshanFn = () => {
    bridgePortraitZhongshan({
      bridge: bridge1.value
    }).then((res) => {
      if(res.code === 200){
        high.value = res.data.high;
        shebiao.value = res.data.shebiao;
        wide.value = res.data.wide;
      }
    });
  };
  const picUrl1 = ref("");
  const getBgPicFn1 = () => {
    getBgPic({
      bridge: bridge1.value
    }).then((res) => {
      if(res.code === 200 && res.data.picUrl){
        picUrl1.value = `${import.meta.env.VITE_APP_BASE_API}attach` + res.data.picUrl;
      }else{
        picUrl1.value = "";
      }
    });
  };
  const imgError1 = () => {
    picUrl1.value = "";
  };
  const bridgeHoleData1 = ref({});
  const tonghangkong1 = ref([]);
  const bridgeWaterwayRiskFn1 = () => {
    bridgeWaterwayRisk({
      bridge: bridge1.value
    }).then((res) => {
      if(res.code === 200){
        bridgeHoleData1.value = res.data;
        tonghangkong1.value = res.data.tonghangkong;
      }
    });
  };
  const yawStatisticsData1 = ref({});
  const yawStatisticsFn1 = () => {
    yawStatistics({
      bridge: bridge1.value
    }).then((res) => {
      if(res.code === 200){
        yawStatisticsData1.value = res.data.total_num[0];        
      }
    });
  };
  const bgWaterSitData1 = ref({});
  const bgWaterSitFn1 = () => {
    bgWaterSit({
      bridge: bridge1.value
    }).then((res) => {
      if(res.code === 200){
        bgWaterSitData1.value = res.data[0] || {};
      }
    });
  };
  const radio6 = ref("通航孔");
  const count1 = ref("1");
  const radio7 = ref("周");
  const shipllAnalysFn1 = () => {
    if(radio7.value === "日"){
      shipllAnalys({
        bridge: bridge1.value,
        type: count1.value
      }).then((res) => {
        if(res.code === 200 && res.data.length){
          document.getElementById('no-data').style.display = 'none';
          initSeventhChart(res.data);
        }else{
          document.getElementById('no-data').style.display = 'block';
        }
      });
    }else if(radio7.value === "周"){
      shipllAnalysWeek({
        bridge: bridge1.value,
        type: count1.value
      }).then((res) => {
        if(res.code === 200 && res.data.length){
          document.getElementById('no-data').style.display = 'none';
          initSeventhChart(res.data);
        }else{
          document.getElementById('no-data').style.display = 'block';
        }
      });
    }else if(radio7.value === "月"){
      shipllAnalysMonth({
        bridge: bridge1.value,
        type: count1.value
      }).then((res) => {
        if(res.code === 200 && res.data.length){
          document.getElementById('no-data').style.display = 'none';
          initSeventhChart(res.data);
        }else{
          document.getElementById('no-data').style.display = 'block';
        }
      });
    }else if(radio7.value === "年"){
      shipllAnalysYear({
        bridge: bridge1.value,
        type: count1.value
      }).then((res) => {
        if(res.code === 200 && res.data.length){
          document.getElementById('no-data').style.display = 'none';
          initSeventhChart(res.data);
        }else{
          document.getElementById('no-data').style.display = 'block';
        }
      });
    }
  };
  //风速情况
  const windSpeedFn = () => {
    windSpeed({
      bridge: bridge1.value
    }).then((res) => {
      if(res.code === 200) {
        let xAxisData = [];
        let seriesData = [];
        res.data.forEach((item) => {
          xAxisData.push(item.sj);
          seriesData.push(item.avgWindSpeed);
        });
        initLineChart1(xAxisData,seriesData);
      }
    });
  };
  const initLineChart1 = (xAxisData,seriesData) => {
    let lineChart = echarts.getInstanceByDom(document.getElementById("lineChart1"));
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById("lineChart1"));

    let option;
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      grid: {
        top: "40px",
        left: "50px",
        right: "30px",
        bottom: "45px",
      },
      xAxis: {
        type: "category",
        data: xAxisData,
        axisLabel: {
          color: "#FFFFFF",
          fontSize: "16px",
        },   
      },
      yAxis: {
        name: "风速（m/s）",
        type: "value",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "#FFFFFF",
        },
        axisLabel: {
          color: "#FFFFFF",
          fontSize: "16px",
        }, 
        splitLine: {
          show: true,
          lineStyle:{
            color: 'rgba(255,255,255,0.2)'
          }
        } 
      },
      series: [
        {
          name: "风速(m/s)",
          data: seriesData,
          type: "line",
          color: "#78DFFF",
        },
      ],
    };
    option && lineChart.setOption(option);
  };
  //能见度情况
  const nengjianduFn = () => {
    nengjiandu({
      bridge: bridge1.value
    }).then((res) => {
      if (res.code === 200) {
        let xAxisData = [];
        let seriesData = [];
        res.data.forEach((item) => {
          xAxisData.push(item.sj);
          seriesData.push(item.njdValue);
        });
        initLineChart2(xAxisData,seriesData);
      }
    });
  };
  const initLineChart2 = (xAxisData,seriesData) => {
    let lineChart = echarts.getInstanceByDom(document.getElementById("lineChart2"));
    if (lineChart != null && lineChart != "" && lineChart != undefined) {
      lineChart.dispose();
    }
    lineChart = echarts.init(document.getElementById("lineChart2"));

    let option;
    option = {
      tooltip: {
        trigger: "axis",
        confine: true, //限制在图表区域内
      },
      grid: {
        top: "40px",
        left: "50px",
        right: "30px",
        bottom: "45px",
      },
      xAxis: {
        type: "category",
        data: xAxisData,
        axisLabel: {
          color: "#FFFFFF",
          fontSize: "16px",
        },      
      },
      yAxis: {
        name: "能见度（m）",
        type: "value",
        nameTextStyle: {
          fontWeight: "500",
          fontSize: "16px",
          color: "#FFFFFF",
        },
        axisLabel: {
          color: "#FFFFFF",
          fontSize: "16px",
        }, 
        splitLine: {
          show: true,
          lineStyle:{
            color: 'rgba(255,255,255,0.2)'
          }
        } 
      },
      series: [
        {
          name: "能见度(m)",
          data: seriesData,
          type: "line",
          color: "#78DFFF",
        },
      ],
    };
    option && lineChart.setOption(option);
  };

  //事故案例情况
  const year = ref("全部");
  const yearOptions = ref([]);
  const tableData = ref([]);
  const recentTime = ref("");
  const getYearListFn = () => {
    getYearList().then((res) => {
      if(res.code === 200){
        // year.value = res.data[0].year;
        res.data.unshift({year: "全部"});
        yearOptions.value = res.data;
        acciSitFn();
      }
    });
  };
  const acciSitFn = () => {
    acciSit({
      year: year.value === "全部"? "" : year.value
    }).then((res) => {
      if(res.code === 200){
        tableData.value = res.data.accidentList;
        recentTime.value = res.data.recentTime;

        let accidentData = [];
        let colorData = [
          '#78DFFF','#9AD4EF','#309CFF','#2B679D','#5057FD','#8083D8','#5AF5D5','#A6E7D9','#55FE5C','#9CDB9F',
          '#FFC733','#FFE6A5','#FE762A','#F9B793','#E33F3F','#F48787','#ED44F0','#F5ABF6','#41616A','#ADCDD6',
        ]; 
        res.data.group.forEach((item,index) => {
          let obj = {
            name: item.accidentLevel,
            value: item.count,
            itemStyle: { 
              color: colorData[index]
            }
          };
          accidentData.push(obj);
        });    
        initEighthChart(accidentData);    
      }
    });
  };
  const yearChange = () => {
    acciSitFn();
  };
  const showAccidentList = ref(false); 

  const initFirstChart = (data) => {
    let xAxisData = [];
    let seriesData = [];
    data.forEach((item) => {
      xAxisData.push(item.time);
      seriesData.push(item.cbll);
    });
    nextTick(() => {
      let lineChart = echarts.getInstanceByDom(document.getElementById("first-chart"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('first-chart'));
  
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        grid: {
          top: '40px',
          left: '70px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },            
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          name: '单位（艘）',
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          }, 
          splitLine: {
            show: true,
            lineStyle:{
              color: 'rgba(255,255,255,0.2)'
            }
          } 
        },
        series: [
          {
            data: seriesData,
            type: 'line',
            itemStyle: {
              color: '#78DFFF'
            },
          }
        ]
      };
      option && lineChart.setOption(option);
    });      
  };
  const initSecondChart1 = (data) => {
    nextTick(() => {
      let xAxisData = [];
      let seriesData = [];
      data.forEach((item) => {
        xAxisData.push(item.month);
        seriesData.push(item.times);
      });
      let lineChart = echarts.getInstanceByDom(document.getElementById("second-chart1"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('second-chart1'));
  
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        grid: {
          top: '40px',
          left: '60px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },            
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          name: '船舶数量（艘）',
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          }, 
          splitLine: {
            show: true,
            lineStyle:{
              color: 'rgba(255,255,255,0.2)'
            }
          } 
        },
        series: [
          {
            data: seriesData,
            type: 'line',
            itemStyle: {
              color: '#78DFFF'
            },
          }
        ]
      };
      option && lineChart.setOption(option);
    });      
  };
  const initSecondChart2 = (data) => {
    nextTick(() => {
      let xAxisData = [];
      let seriesData = [];
      data.forEach((item) => {
        xAxisData.push(item.month);
        seriesData.push(item.times);
      });
      let lineChart = echarts.getInstanceByDom(document.getElementById("second-chart2"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('second-chart2'));
  
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        grid: {
          top: '40px',
          left: '60px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },            
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          name: '船舶数量（艘）',
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          }, 
          splitLine: {
            show: true,
            lineStyle:{
              color: 'rgba(255,255,255,0.2)'
            }
          } 
        },
        series: [
          {
            data: seriesData,
            type: 'line',
            itemStyle: {
              color: '#78DFFF'
            },
          }
        ]
      };
      option && lineChart.setOption(option);
    });      
  };
  const initSecondChart3 = (data) => {
    nextTick(() => {
      let xAxisData = [];
      let seriesData = [];
      data.forEach((item) => {
        xAxisData.push(item.month);
        seriesData.push(item.times);
      });
      let lineChart = echarts.getInstanceByDom(document.getElementById("second-chart3"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('second-chart3'));
  
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        grid: {
          top: '40px',
          left: '60px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },            
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          name: '船舶数量（艘）',
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          }, 
          splitLine: {
            show: true,
            lineStyle:{
              color: 'rgba(255,255,255,0.2)'
            }
          } 
        },
        series: [
          {
            data: seriesData,
            type: 'line',
            itemStyle: {
              color: '#78DFFF'
            },
          }
        ]
      };
      option && lineChart.setOption(option);
    });      
  };
  const initThirdChart = (obj) => {
    nextTick(() => {
      let data = [
        { name: '0-500吨', value: obj.ton1, itemStyle: { color: '#78DFFF' } },
        { name: '500-1000吨', value: obj.ton2, itemStyle: { color: '#9AD4EF' } },
        { name: '1000-1500吨 ', value: obj.ton3, itemStyle: { color: '#309CFF' } },
        { name: '1500-2000吨', value: obj.ton4, itemStyle: { color: '#2B679D' } },
        { name: '2000-3000吨', value: obj.ton5, itemStyle: { color: '#5057FD' } },
        { name: '3000吨以上', value: obj.ton6, itemStyle: { color: '#8083D8' } },
      ];

      let pieChart = echarts.getInstanceByDom(document.getElementById("third-chart"));
      if(pieChart != null && pieChart != "" && pieChart != undefined){
        pieChart.dispose();
      }
      pieChart = echarts.init(document.getElementById('third-chart'));
      let option = {            
        graphic: {
          type: 'image',
          id: 'background',
          left: 70,
          top: 16,
          z: -10, // 确保背景图在底层
          bounding: 'raw',
          origin: [200, 200], // 图片的中心位置
          style: {
            image: chartBg, // 背景图片的URL
            width: 160, // 背景图片的宽度
            height: 160, // 背景图片的高度
          }
        },
        legend: {   
          type: 'scroll', 
          textStyle: {
            fontSize: "16px",
            color: "#FFFFFF",
          },    
          pageIconColor: '#FFFFFF', // 翻页按钮的颜色
          pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色
          pageTextStyle: { // 图例页信息的文字样式
            color: '#FFFFFF'
          },      
        },    
        tooltip: {
          trigger: 'item',
          confine: true, //限制在图表区域内   
        },     
        series: [
          {
            type: 'pie',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,          
            },
            labelLine: {
              show: true, //标签连接线
            },  
            data: data
          }
        ],          
      };
      option && pieChart.setOption(option);
    }); 
  };
  const initFourthChart = (data) => {
    let xAxisData = [];
    let seriesData1 = [];
    let seriesData2 = [];
       
    data.forEach((item) => {
      xAxisData.push(item.tgsj);
      if(count.value == 1){
        seriesData1.push(item.up);
        seriesData2.push(item.down);
      }else{
        seriesData1.push(item.zhongdai);
        seriesData2.push(item.kongzai);
      }
    });

    let chart = echarts.getInstanceByDom(document.getElementById("fourth-chart"));
    if(chart != null && chart != "" && chart != undefined){
      chart.dispose();
    }
    chart = echarts.init(document.getElementById('fourth-chart'));
    let option;
    option = {
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: "shadow",
        },
        confine: true, //限制在图表区域内
      },
      legend: {
        textStyle: {
          fontSize: "16px",
          color: "#FFFFFF",
        },  
        itemGap: 6,
      },
      grid: {
        top: "20%",
        left: "8%",
        right: "15%",
        bottom: "5%",
        containLabel: true,
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          startValue: 0,
          endValue: 6,
          zoomLock: false,
        },
      ],
      xAxis: [
        {
          type: "category",
          name: "",
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          data: xAxisData,
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
          axisLabel: {
            interval:0, 
            color: "#FFFFFF",
            fontSize: "16px",
          },
          axisPointer: {
            show: true,
            type: 'none',
            label: {
              show: false,
            },
          },  
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "船舶流量（艘）",
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          nameGap: 15,
          axisLabel: {
            interval:0, 
            color: "#FFFFFF",
            fontSize: "16px",
          },
          splitLine: {
            show: true,
            lineStyle:{
              color: 'rgba(255,255,255,0.2)'
            }
          } 
        },
      ],
      series: [
        {
          name: count.value == 1? "上行" : "重载",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          stack: "Ad",
          barWidth: '15%',
          color: "#78DFFF",
          data: seriesData1,
        },
        {
          name: count.value == 1? "下行" : "空载",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          stack: "Ad",
          barWidth: '15%',
          color: "#FFC733",
          data: seriesData2,
        },        
      ],
    };

    option && chart.setOption(option);
  };
  const initFifthChart = (data) => {
    nextTick(() => {
      let xAxisData = [];
      let seriesData = [];
      if(radio4.value == "日"){
        xAxisData = data.day1;
        seriesData = [
          {
            name: '实际',
            data: data.num,
            type: 'line',
            itemStyle: {
              color: '#78DFFF'
            },
          },
        ];
      }else if(radio4.value == "月"){
        xAxisData = data.month1.actualMonth;
        seriesData = [
          {
            name: '实际',
            data: data.month1.actual,
            type: 'line',
            itemStyle: {
              color: '#78DFFF'
            },
          },
          {
            name: '预测值',
            data: data.month1.forcast,
            type: 'line',
            itemStyle: {
              color: '#FFC733'
            },
          }
        ];
      }
      let lineChart = echarts.getInstanceByDom(document.getElementById("fifth-chart"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('fifth-chart'));
  
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        legend: {
          textStyle: {
            fontSize: "16px",
            color: "#FFFFFF",
          },  
          itemGap: 6,
        },
        grid: {
          top: '40px',
          left: '50px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },            
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          name: '单位（万艘）',
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          }, 
          splitLine: {
            show: true,
            lineStyle:{
              color: 'rgba(255,255,255,0.2)'
            }
          } 
        },
        series: seriesData
      };
      option && lineChart.setOption(option);
    });      
  };
  const initSixthChart = (data) => {
    nextTick(() => {
      let xAxisData = [];
      let seriesData = [];
      if(radio5.value == "日"){
        xAxisData = data.day1;
        seriesData = [
          {
            name: '实际',
            data: data.num,
            type: 'line',
            itemStyle: {
              color: '#78DFFF'
            },
          },
        ];
      }else if(radio5.value == "月"){
        xAxisData = data.month1.actualMonth;
        seriesData = [
          {
            name: '实际',
            data: data.month1.actual,
            type: 'line',
            itemStyle: {
              color: '#78DFFF'
            },
          },
          {
            name: '预测值',
            data: data.month1.forcast,
            type: 'line',
            itemStyle: {
              color: '#FFC733'
            },
          }
        ];
      }
      let lineChart = echarts.getInstanceByDom(document.getElementById("sixth-chart"));
      if(lineChart != null && lineChart != "" && lineChart != undefined){
        lineChart.dispose();
      }
      lineChart = echarts.init(document.getElementById('sixth-chart'));
  
      let option;
      option = {
        tooltip: {
          trigger: 'axis',
          confine: true, //限制在图表区域内
        },
        legend: {
          textStyle: {
            fontSize: "16px",
            color: "#FFFFFF",
          },  
          itemGap: 6,
        },
        grid: {
          top: '40px',
          left: '50px',
          right: '15px',
          bottom: '40px',
        },
        dataZoom: [
          {
            show: false,
            type: "inside",
            zoomLock: false,
          },
        ],
        xAxis: {
          type: 'category',
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          },            
          data: xAxisData,
        },
        yAxis: {
          type: 'value',
          name: '单位（万吨）',
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          axisLabel: {
            color: "#FFFFFF",
            fontSize: "16px",
          }, 
          splitLine: {
            show: true,
            lineStyle:{
              color: 'rgba(255,255,255,0.2)'
            }
          } 
        },
        series: seriesData
      };
      option && lineChart.setOption(option);
    });      
  };
  const initSeventhChart = (data) => {
    let xAxisData = [];
    let seriesData1 = [];
    let seriesData2 = [];
       
    data.forEach((item) => {
      xAxisData.push(item.tgsj);
      if(count1.value == 1){
        seriesData1.push(item.up);
        seriesData2.push(item.down);
      }else{
        seriesData1.push(item.zhongdai);
        seriesData2.push(item.kongzai);
      }
    });
    let chart = echarts.getInstanceByDom(document.getElementById("seventh-chart"));
    if(chart != null && chart != "" && chart != undefined){
      chart.dispose();
    }
    chart = echarts.init(document.getElementById('seventh-chart'));
    let option;
    option = {
      tooltip: {
        trigger: 'item',
        axisPointer: {
          type: "shadow",
        },
        confine: true, //限制在图表区域内
      },
      legend: {
        textStyle: {
          fontSize: "16px",
          color: "#FFFFFF",
        },  
        itemGap: 6,
      },
      grid: {
        top: "20%",
        left: "12%",
        right: "15%",
        bottom: "5%",
        containLabel: true,
      },
      dataZoom: [
        {
          show: false,
          type: "inside",
          startValue: 0,
          endValue: 9,
          zoomLock: false,
        },
      ],
      xAxis: [
        {
          type: "category",
          name: "",
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          data: xAxisData,
          axisTick: {
            alignWithLabel: true, //控制刻度线是否与刻度标签对齐
            show: false, //是否显示刻度线
          },
          axisLabel: {
            interval:0, 
            color: "#FFFFFF",
            fontSize: "16px",
          },
          axisPointer: {
            show: true,
            type: 'none',
            label: {
              show: false,
            },
          },  
        },
      ],
      yAxis: [
        {
          type: "value",
          name: "船舶流量（艘）",
          nameTextStyle: {
            fontWeight: "500",
            fontSize: "16px",
            color: "#FFFFFF",
          },
          nameGap: 15,
          axisLabel: {
            interval:0, 
            color: "#FFFFFF",
            fontSize: "16px",
          },
          splitLine: {
            show: true,
            lineStyle:{
              color: 'rgba(255,255,255,0.2)'
            }
          } 
        },
      ],
      series: [
        {
          name: count1.value == 1? "上行" : "重载",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          stack: "Ad",
          barWidth: '15%',
          color: "#78DFFF",
          data: seriesData1,
        },
        {
          name: count1.value == 1? "下行" : "空载",
          type: "bar",
          emphasis: {
            focus: "series",
          },
          stack: "Ad",
          barWidth: '15%',
          color: "#FFC733",
          data: seriesData2,
        },        
      ],
    };

    option && chart.setOption(option);
  };
  const initEighthChart = (accidentData) => {
    nextTick(() => {
      let pieChart = echarts.getInstanceByDom(document.getElementById("eighth-chart"));
      if(pieChart != null && pieChart != "" && pieChart != undefined){
        pieChart.dispose();
      }
      pieChart = echarts.init(document.getElementById('eighth-chart'));
      let option = {            
        graphic: {
          type: 'image',
          id: 'background',
          left: 241,
          top: 20,
          z: -10, // 确保背景图在底层
          bounding: 'raw',
          origin: [200, 200], // 图片的中心位置
          style: {
            image: chartBg, // 背景图片的URL
            width: 260, // 背景图片的宽度
            height: 260, // 背景图片的高度
          }
        },
        legend: {   
          type: 'scroll', 
          textStyle: {
            fontSize: "16px",
            color: "#FFFFFF",
          },    
          pageIconColor: '#FFFFFF', // 翻页按钮的颜色
          pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色
          pageTextStyle: { // 图例页信息的文字样式
            color: '#FFFFFF'
          },      
        },    
        tooltip: {
          trigger: 'item',
          confine: true, //限制在图表区域内   
        },     
        series: [
          {
            type: 'pie',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,          
            },
            labelLine: {
              show: true, //标签连接线
            },  
            data: accidentData
          }
        ],          
      };
      option && pieChart.setOption(option);
   
    }); 
  };
  const initNinthChart = (regionDivisionData) => {
    nextTick(() => {
      let pieChart = echarts.getInstanceByDom(document.getElementById("ninth-chart"));
      if(pieChart != null && pieChart != "" && pieChart != undefined){
        pieChart.dispose();
      }
      pieChart = echarts.init(document.getElementById('ninth-chart'));
      let option = {            
        graphic: {
          type: 'image',
          id: 'background',
          left: 43,
          top: 15,
          z: -10, // 确保背景图在底层
          bounding: 'raw',
          origin: [200, 200], // 图片的中心位置
          style: {
            image: chartBg, // 背景图片的URL
            width: 210, // 背景图片的宽度
            height: 210, // 背景图片的高度
          }
        },
        legend: {   
          type: 'scroll', 
          textStyle: {
            fontSize: "16px",
            color: "#FFFFFF",
          },    
          pageIconColor: '#FFFFFF', // 翻页按钮的颜色
          pageIconInactiveColor: '#2f4554', // 翻页按钮不激活时（即翻页到头时）的颜色
          pageTextStyle: { // 图例页信息的文字样式
            color: '#FFFFFF'
          },      
        },    
        tooltip: {
          trigger: 'item',
          confine: true, //限制在图表区域内   
        },     
        series: [
          {
            type: 'pie',
            radius: ['60%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,          
            },
            labelLine: {
              show: true, //标签连接线
            },  
            data: regionDivisionData
          }
        ],          
      };
      option && pieChart.setOption(option);
   
    }); 
  };
  //是否显示iframe
  const isShow = ref(false);
  //缺省图
  const noEcharts = (id) => {
    const noDataImg = errorImg;
    const averageChart = document.getElementById(id);
    averageChart.style.display = 'flex';
    averageChart.style.flexDirection = 'column';
    averageChart.style.justifyContent = 'center';
    averageChart.style.alignItems = 'center';
    averageChart.removeChild(averageChart.firstChild); 
    const mainImg = document.createElement('img'); 
    averageChart.appendChild(mainImg);
    mainImg.style.width = 'auto';
    mainImg.style.height = 'auto';
    mainImg.src = noDataImg;
    const pBlock = document.createElement('p');
    averageChart.appendChild(pBlock);
    pBlock.innerHTML = '暂无数据';
    pBlock.style.color = '#FFFFFF';
    pBlock.style.fontSize = '14px';
  };

  onMounted(() => {
    document.title = "水上桥区管控";
    getBgAndWyFn();
    rammedBridgeFn();
    cityDivisionFn();
    regionDivisionFn();
    getBridgeListFn();
    bgListFn();
    getYearListFn();
  });
</script>

<style lang="scss" scoped>
  @font-face{
    font-family: Din;
    src: url("../assets/fonts/din.ttf");
  }
  @font-face{
    font-family: Tx;
    src: url("../assets/fonts/tx.ttf");
  }
  .container{
    width: 5760px;
    height: 1200px;
    transform-origin: 0 0;
    position: relative;
    background: #012138;
    .main{
      width: 100%;
      height: 100%;
      display: flex;
      box-sizing: content-box;
      .left-content{
        width: 1648px;
        .item-content{              
          box-sizing: content-box;
          background-color: #06324f;
          .item-title{
            background-image:url('../assets/images/big-screen/one-title-bg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;           
            color: #fff;
            font-size: 26px; 
            font-weight: 400;
            height: 40px;
            line-height: 40px;
            padding: 8px 0px 8px 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .title{
              font-family: 'Tx';
            }
          }
          .flex{
            display: flex;
            flex-wrap: wrap;
            box-sizing: content-box;
            margin: 8px 28px;
            .item{       
              width: 32%;
              height: 246px;    
              box-sizing: content-box;
              .top{
                background-image:url('../assets/images/big-screen/two-title-bg.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px 0px;
                margin-bottom: 8px;
                .title{
                  font-family: 'Tx';
                  font-size: 24px;
                  color: #fff;
                  padding-left: 32px;
                }   
              }
              .top1{
                background-image:url('../assets/images/big-screen/three-title-bg.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px 0px;
                margin-bottom: 8px;
                .title{
                  font-family: 'Tx';
                  font-size: 24px;
                  color: #fff;
                  padding-left: 32px;
                }   
                .tips{
                  color:#FFFFFF;
                  font-size: 18px;
                  font-weight: 400;
                }
              }
              .part{
                display: flex;
                .left-part{
                  width: 35%;
                  margin: 10px 20px;                  
                  .left-part-item{
                   display: flex;
                   .img-icon{
                    width: 74px;
                    height: 74px;
                    img{
                      width: 100%;
                      height: 100%;
                    }
                   }
                   .count{
                    margin-left: 16px;
                    .name{
                      font-weight: 500;
                      font-size: 20px;
                      color: #FFFFFF;
                    }
                    .value{
                      font-family: 'Din';
                      font-weight: bold;
                      font-size: 40px;
                      color: #FFFFFF;
                    }
                   }                    
                  }
                }
                .right-part{
                  width: 65%;             
                  .part-item{
                    display: flex;
                    justify-content: space-around;
                    color: #FFFFFF;
                    background: linear-gradient( 90deg, rgba(120,223,255,0.02) 1%, rgba(41,191,238,0.31) 59%, rgba(120,223,255,0) 100%);
                    border: 1px solid;
                    border-image: linear-gradient(360deg, rgba(120, 223, 255, 0), rgba(63, 207, 252, 0.81), rgba(120, 223, 255, 0)) 1 1;  
                    margin-bottom: 9px;
                    padding: 8px 0;
                    .name{
                      font-weight: 500;
                      font-size: 18px;
                    }
                    .value{
                      font-family: 'Din';
                      font-weight: bold;
                      font-size: 32px;
                    }
                  }
                }
              }
              .bridge-accident{
                height: 268px;
                overflow: auto;
                .bridge-accident-item{
                  margin: 10px 0;
                  .top-part{
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 8px;
                    .name{
                      font-weight: 400;
                      font-size: 14px;
                      color: #FFFFFF;
                    }
                    .value{
                      font-family: 'Din';
                      font-weight: bold;
                      font-size: 18px;
                      color: #78DFFF;
                    }
                  }
                }
                .no-data{
                  display: flex;
                  justify-content: center;
                  line-height: 268px;
                  color: #FFFFFF;
                  font-size: 28px;
                  font-weight: bold;
                }
              }
              .bridge-img{
                width: 100%;
                height: 129px;
                img{
                  width: 100%;
                  height: 100%;
                }
                .no-img{
                  text-align: center;
                  color: #FFFFFF;
                  font-size: 14px;
                  img{
                    width: 180px;
                    height: 100px;
                  }
                }
              }
              .base-info{
                height: 65px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                // margin: 8px 0px;
                padding: 0px 16px;
                background: rgba(120,223,255,0.05);
                border: 1px solid;
                border-image: linear-gradient(360deg, rgba(120, 223, 255, 0), rgba(63, 207, 252, 0.81), rgba(120, 223, 255, 0)) 1 1;               
                .left-info{
                  .name{
                    font-weight: 600;
                    font-size: 18px;
                    color: #78DFFF;
                  }
                  .address{
                    font-weight: 500;
                    font-size: 16px;
                    color: #FFFFFF;
                  }
                }
                .right-info{
                  display: flex;
                  .name{
                    font-weight: 400;
                    font-size: 18px;
                    color: #FFFFFF;
                  }
                  .value{
                    font-weight: 500;
                    font-size: 18px;
                    color: #28CE8E;
                  }
                }
              }
              .hole-count{
                height: 194px;
                background: rgba(120,223,255,0.05);
                border: 1px solid;
                border-image: linear-gradient(360deg, rgba(120, 223, 255, 0), rgba(63, 207, 252, 0.81), rgba(120, 223, 255, 0)) 1 1;                
                .hole-item{
                  display: flex;
                  justify-content: space-between;   
                  padding: 8px 0; 
                  margin: 0 16px;
                  border-bottom: 1px solid #204a64;              
                  .name{
                    font-weight: 500;
                    font-size: 18px;
                    color: #FFFFFF;
                  }
                  .value{
                    font-family: 'Din';
                    font-weight: bold;
                    font-size: 21px;
                    color: #FFFFFF;
                  }
                }
                .tips{
                  color: #FFFFFF;
                  font-size: 16px;
                  text-align: right;
                  margin-top: 10px;
                }
              }
              .water-details{
                height: 195px;
                background: rgba(120,223,255,0.05);
                border: 1px solid;
                border-image: linear-gradient(360deg, rgba(120, 223, 255, 0), rgba(63, 207, 252, 0.81), rgba(120, 223, 255, 0)) 1 1;                
                .top-details{
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin: 0 16px;
                  .update-time{
                    font-weight: 400;
                    font-size: 18px;
                    color: #FFFFFF;
                  }
                }
                .bottom-details{
                  .water-value{
                    font-family: 'Din';
                    font-weight: bold;
                    font-size: 32px;
                    color: #FFFFFF;
                    text-align: center;
                    margin: 10px 0;
                  }
                  .count{
                    height: 81px;
                    background: rgba(120,223,255,0.05);
                    border: 1px solid;
                    border-image: linear-gradient(360deg, rgba(120, 223, 255, 0), rgba(63, 207, 252, 0.81), rgba(120, 223, 255, 0)) 1 1;                
                    margin: 0 16px;
                    display: flex;
                    justify-content: space-between;
                    .count-item{
                      margin: 8px 16px 0px 16px;
                      .name{
                        font-weight: 500;
                        font-size: 16px;
                        color: #FFFFFF;
                      }
                      .value{
                        font-family: 'Din';
                        font-weight: bold;
                        font-size: 28px;
                        display: flex;
                        align-items: center;
                        img{
                          width: 18px;
                          height: 18px;
                          margin-left: 6px;
                        }
                      }
                    }
                  }
                }
              }
              .blueprint{
                position: relative;
                .blueprint-part{
                  width: 100%;
                  height: 195px;
                  img{
                    width: 100%;
                    height: 100%;
                  }
                }
                .num{
                  position: absolute;
                  top: 16px;
                  left: 16px;
                  .num-item{
                    .name{
                      font-weight: 500;
                      font-size: 18px;
                      color: #FFFFFF;
                    }
                    .value{
                      font-family: 'Din';
                      font-weight: bold;
                      font-size: 32px;
                      color: #FFFFFF;
                    }
                    .more{
                      font-size: 18px;
                      font-weight: bold;
                      color: #FFFFFF;
                      text-decoration: underline;
                    }
                    .no{
                      font-size: 18px;
                      color: #FFFFFF;
                    }
                  }
                }
              }
              .maintenance{
                height: 194px;
                display: flex;
                flex-wrap: wrap;
                background: rgba(120,223,255,0.05);
                border: 1px solid;
                border-image: linear-gradient(360deg, rgba(120, 223, 255, 0), rgba(63, 207, 252, 0.81), rgba(120, 223, 255, 0)) 1 1;
                .maintenance-item{
                  width: 50%;
                  text-align: center;
                  display: flex;
                  justify-content: center;
                  align-items: center;
                  .name{
                    font-weight: 500;
                    font-size: 18px;
                    color: #FFFFFF;
                  }
                  .value{
                    font-family: 'Din';
                    font-weight: bold;
                    font-size: 32px;
                    color: #FFFFFF;
                  }
                }
              }
              .inspect{
                height: 194px;
                background: rgba(120,223,255,0.05);
                border: 1px solid;
                border-image: linear-gradient(360deg, rgba(120, 223, 255, 0), rgba(63, 207, 252, 0.81), rgba(120, 223, 255, 0)) 1 1;
                display: flex;
                justify-content: center;
                align-items: center;
                .img{
                  margin-right: 12px;
                }
                .name{
                  font-weight: 500;
                  font-size: 20px;
                  color: #FFFFFF;
                }
                .value{
                  font-family: 'Din';
                  font-weight: bold;
                  font-size: 40px;
                  color: #FFFFFF;
                }
              }
              .flowed{
                height: 194px;
                background: rgba(120,223,255,0.05);
                border: 1px solid;
                border-image: linear-gradient(360deg, rgba(120, 223, 255, 0), rgba(63, 207, 252, 0.81), rgba(120, 223, 255, 0)) 1 1;
                .top-part{
                  display: flex;
                  justify-content: space-around;
                  align-items: center;
                  .count-item{
                    margin-top: 27px;
                    .name{
                      font-weight: 500;
                      font-size: 20px;
                      color: #FFFFFF;
                    }
                    .value{
                      font-family: 'Din';
                      font-weight: bold;
                      font-size: 40px;
                      color: #FFFFFF;
                    }
                  }
                }
                .bottom-part{
                  text-align: center;
                  font-weight: 600;
                  font-size: 32px;
                  color: #78DFFF;
                  margin: 16px 16px 0px 16px;
                  white-space: nowrap; 
                  overflow: hidden;
                  text-overflow: ellipsis;

                }
              }
              .correlation{
                height: 194px;
                background: rgba(120,223,255,0.05);
                border: 1px solid;
                border-image: linear-gradient(360deg, rgba(120, 223, 255, 0), rgba(63, 207, 252, 0.81), rgba(120, 223, 255, 0)) 1 1;
                .value{
                  font-family: 'Din';
                  font-weight: bold;
                  font-size: 46px;
                  color: #78DFFF;
                  text-align: center;
                  margin-top: 67px;
                }                
              }
              .ship-count{
                width: 50%;
                display: flex;
                justify-content: center;               
                .ship-count-item{
                  margin-right: 20px;
                  .name{
                    font-weight: 500;
                    font-size: 20px;
                    color: #FFFFFF;
                  }
                  .value{
                    font-family: 'Din';
                    font-weight: bold;
                    font-size: 40px;
                    color: #FFFFFF;
                  }
                }
              }
              .no-data{
                position: absolute; 
                left: 50%; 
                top: 50%; 
                transform: translate(-50%, -50%); 
                display: none;
                .text{
                  text-align: center;
                  color: #FFFFFF;
                  font-size: 14px;
                }
              }
              .watershed{
                .watershed-title{
                  padding-bottom: 2px;
                  margin-bottom: 8px;
                  font-weight: 500;
                  font-size: 22px;
                  color: #FFFFFF;
                  border-bottom: 1px solid rgba(120,223,255,0.5);
                }  
              }
            }
          }
        }
      }
      .middle-content{
        width: 2464px;     
        height: 1080px;    
        margin: 40px 0px;
        position: relative; 
        .special-topic{
          position: absolute;
          top: 42px;
          left: 10px; 
          font-family: 'Tx';
          font-weight: 400;
          font-size: 18px;
          color: #FFFFFF;
          .topic{
            width: 286px;
            height: 40px;
            background-image:url('../assets/images/big-screen/topic-bg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 24px;
            color: rgba(255,255,255,0.65);
          }
          .topic:hover{
            width: 286px;
            height: 40px;
            background-image:url('../assets/images/big-screen/topic-active-bg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 24px;
          }
          .topic-active{
            width: 286px;
            height: 40px;
            background-image:url('../assets/images/big-screen/topic-active-bg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 24px;
          }
        }
        .legend{
          width: 288px;
          height: 182px;
          background: rgba(5,48,68,0.8);
          border: 1px solid rgba(120,223,255,0.4);  
          position: absolute;
          top: 42px;
          right: 10px; 
          .legend-item{
            display: flex;          
            font-size: 18px;
            font-weight: 400;
            color: #fff;
            margin: 16px 0px 16px 24px;
            img{
              width: 26px;
              height: 26px;
              padding-right: 8px;                
            }
          }
        }
        .count{
          width: 288px;
          height: 122px;
          background: rgba(5,48,68,0.8);
          border-radius: 0px 0px 0px 0px;
          border: 1px solid rgba(120,223,255,0.4);  
          position: absolute;
          top: 240px;
          right: 10px; 
          display: flex;
          justify-content: center;
          align-items: center;
          .count-item{           
            .name{
              font-weight: 500;
              font-size: 16px;
              color: #FFFFFF;
            }
            .value{
              font-family: 'Din';
              font-weight: bold;
              font-size: 28px;
              color: #FFFFFF;
            }
          }
        }
        .filter{
          width: 288px;
          background: rgba(5,48,68,0.8);
          border: 1px solid rgba(120,223,255,0.4);
          position: absolute;
          top: 380px;
          right: 10px;
          .filter-title{
            font-weight: 500;
            font-size: 20px;
            color: #FFFFFF;
            background: rgba(4,35,54,0.8);
            border-bottom: 1px solid rgba(120,223,255,0.4);
            padding: 8px 0px 8px 24px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            img{
              padding-right: 24px;
            }
          }
          .filter-item{
            margin: 8px 24px;
            .name{
              color: #78DFFF;
              font-size: 16px;
              font-weight: bold;
            }
          }
        } 
      }
      .right-content{
        width: 1648px; 
        .item-content{                
          box-sizing: content-box;
          background-color: #06324f;
          .item-title{
            background-image:url('../assets/images/big-screen/one-title-bg.png');
            background-size: 100% 100%;
            background-repeat: no-repeat;            
            color: #fff;
            font-size: 26px;
            font-weight: 400;
            height: 40px;
            line-height: 40px;
            padding: 8px 0px 8px 28px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .title{
              font-family: 'Tx';
            }
          }
          .flex{
            display: flex;
            box-sizing: content-box;
            margin: 8px 28px;
            .item{
              box-sizing: content-box;
              .top{
                background-image:url('../assets/images/big-screen/two-title-bg.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px 0px;
                .title{
                  font-family: 'Tx';
                  font-size: 24px;
                  color: #fff;
                  padding-left: 32px;
                }   
              }
              .top1{
                background-image:url('../assets/images/big-screen/three-title-bg.png');
                background-size: 100% 100%;
                background-repeat: no-repeat;
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 5px 0px;
                .title{
                  font-family: 'Tx';
                  font-size: 24px;
                  color: #fff;
                  padding-left: 32px;
                }   
              }
              .base-info{
                height: 361px;
                margin-top: 8px;
                .bridge-img{
                  width: 100%;
                  height: 175px;
                  img{
                    width: 100%;
                    height: 100%;
                  }
                  .no-img{
                    text-align: center;
                    color: #FFFFFF;
                    font-size: 14px;
                    img{
                      width: 180px;
                      height: 100px;
                    }
                  }
                }    
                .bridge-name{
                  font-weight: 600;
                  font-size: 21px;
                  color: #78DFFF;
                  margin: 0px 16px;
                  padding: 10px 0px 16px 0px;
                  border-bottom: 1px solid #2d5771;
                }      
                .channel-info{
                  display: flex;
                  justify-content: space-between;
                  font-weight: 500;
                  font-size: 18px;
                  color: #FFFFFF;
                  margin: 16px;
                }    
                .condition{
                  height: 57px;
                  background: linear-gradient( 90deg, rgba(120,223,255,0.02) 1%, rgba(41,191,238,0.31) 59%, rgba(120,223,255,0) 100%);
                  border: 1px solid;
                  border-image: linear-gradient(360deg, rgba(120, 223, 255, 0), rgba(63, 207, 252, 0.81), rgba(120, 223, 255, 0)) 1 1;
                  display: flex;
                  justify-content: space-between;
                  line-height: 57px;
                  margin: 0 16px;
                  font-weight: 500;
                  font-size: 18px;
                  color: #FFFFFF;
                  padding: 0 16px;
                  .condition-item{
                    display: flex;
                    align-items: center;
                    img{
                      width: 25px;
                      height: 23px;
                      margin-left: 4px;
                    }
                  }
                }  
              }
              .hole-info{
                height: 361px;
                background: rgba(120,223,255,0.05);
                border: 1px solid;
                border-image: linear-gradient(360deg, rgba(120, 223, 255, 0), rgba(63, 207, 252, 0.81), rgba(120, 223, 255, 0)) 1 1;
                margin-top: 8px;
                .hole-item{
                  display: flex;
                  justify-content: space-between;
                  margin: 0 16px;
                  padding: 24px 0 25px 0;
                  border-bottom: 1px solid #2d5771;
                  .name{
                    font-weight: 500;
                    font-size: 18px;
                    color: #FFFFFF;
                  }
                  .value{
                    font-family: 'Din';
                    font-weight: bold;
                    font-size: 21px;
                    color: #FFFFFF;
                  }
                }
                .tips{
                  text-align: center;
                  font-weight: 400;
                  font-size: 18px;
                  color: #FFFFFF;
                  margin: 16px 0;
                }
              }
              .warning-situation{
                height: 361px;
                background: rgba(120,223,255,0.05);
                border: 1px solid;
                border-image: linear-gradient(360deg, rgba(120, 223, 255, 0), rgba(63, 207, 252, 0.81), rgba(120, 223, 255, 0)) 1 1;
                margin-top: 8px;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                .situation-item{
                  width: 50%;   
                  text-align: center; 
                  position: relative;
                  .value{
                    font-family: 'Din';
                    font-weight: bold;
                    font-size: 41px;
                    color: #F13939;
                    position: absolute;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    margin: auto;
                  }       
                  .name{
                    font-weight: 500;
                    font-size: 18px;
                    color: #FFFFFF;
                  }       
                }
              }
              .water-situation{
                height: 361px;
                background: rgba(120,223,255,0.05);
                border: 1px solid;
                border-image: linear-gradient(360deg, rgba(120, 223, 255, 0), rgba(63, 207, 252, 0.81), rgba(120, 223, 255, 0)) 1 1;
                margin-top: 8px;
                display: flex;
                justify-content: center;
                align-items: center;
                .water-item{
                  display: flex;
                  align-items: center;
                  img{
                    margin-right: 12px;
                  }
                  .name{
                    font-weight: 500;
                    font-size: 20px;
                    color: #FFFFFF;
                  }
                  .value{
                    font-family: 'Din';
                    font-weight: bold;
                    font-size: 40px;
                    color: #FFFFFF;
                    display: flex;
                    align-items: center;
                    .actual{
                      font-weight: 500;
                      font-size: 16px;
                      color: #28CE8E;
                      background: rgba(40,206,142,0.2);
                      border-radius: 4px;
                      padding: 6px 12px;
                      margin-left: 10px;
                    }
                  }
                }
              }
              .recently{
                font-size: 18px;
                color: #FFFFFF;
                margin: 24px 0px 24px 28px;
                span{
                  color: #78DFFF;
                }
              }
              .table{
                margin-top: 8px;
              }
              #no-data{
                position: absolute; 
                left: 50%; 
                top: 50%; 
                transform: translate(-50%, -50%); 
                display: none;
                .text{
                  text-align: center;
                  color: #FFFFFF;
                  font-size: 14px;
                }
              }
              .bridge-accident{
                height: 369px;
                overflow: auto;
                .bridge-accident-item{
                  margin: 10px 0;
                  .top-part{
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 8px;
                    .name{
                      font-weight: 400;
                      font-size: 14px;
                      color: #FFFFFF;
                    }
                    .value{
                      font-family: 'Din';
                      font-weight: bold;
                      font-size: 18px;
                      color: #78DFFF;
                    }
                  }
                }
                .no-data{
                  display: flex;
                  justify-content: center;
                  line-height: 369px;
                  color: #FFFFFF;
                  font-size: 28px;
                  font-weight: bold;
                }
              }
            }
          }
        }
      }
    }
    .my-iframe{
      .close-btn{
        font-family: 'Tx';
        position: absolute;
        top: 40px;
        left: 1940px;
        color: #FFFFFF;
        font-size: 20px;
        background-image:url('../assets/images/big-screen/back-bg.png');
        background-size: 100% 100%;
        background-repeat: no-repeat;
        width: 236px;
        height: 44px;
        line-height: 44px;
        text-align: center;
      }
    }
  }
  // 表单样式
  :deep(.el-form-item__label){
    color: #06283e;
  }
  :deep(.el-input__inner){
    color: #78DFFF;
    background: transparent;
  }
  :deep(.el-input__wrapper){
    background-color: transparent;
    box-shadow: 0 0 0 1px #06283e inset;
  }
  :deep(.el-range-editor--small .el-range-separator){
    color: #78DFFF;
  }
  :deep(.el-input__inner::placeholder){
    color: #78DFFF;
  }
  :deep(.el-select .el-input .el-select__caret.el-icon){
    color: #78DFFF;
  }
  :deep(.el-date-editor .el-range__icon){
    color: #78DFFF;
  }
  :deep(.el-range-input::placeholder){
    color: #78DFFF;
  }
  :deep(.el-range-editor--small .el-range-input){
    color: #78DFFF;
  }
  :deep(.el-cascader .el-input .el-input__suffix-inner .el-icon svg){
    color: #78DFFF;
  }
  :deep(.el-radio-button__inner){
    color: #fff;
    background: transparent;
    border: 1px solid #D9D9D9;
  }
  :deep(.el-radio-button__original-radio:checked+.el-radio-button__inner){
    color: #262626;    
    background-color: #78DFFF;
    border: 1px solid #78DFFF;
  }
  :deep(.el-checkbox){
    font-weight: 400;
    --el-checkbox-font-size: 18px;
    // color: rgba(255,255,255,0.65);
    color: #fff;
  }
  :deep(.el-checkbox__inner){
    background-color: #D8D8D8;
  }
  :deep(.el-checkbox__input.is-checked+.el-checkbox__label){
    color: #78DFFF;
  }
  :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner){
    background-color: #78DFFF;
    border-color: #78DFFF;
  }
  :deep(.el-checkbox__input.is-checked .el-checkbox__inner){
    background-color: #78DFFF;
    border-color: #78DFFF;
  }
  :deep(.el-checkbox__inner::after){    
    box-sizing: content-box;
    content: "";
    border: 1px solid black;
    border-left: 0;
    border-top: 0;
    height: 7px;
    left: 4px;
    position: absolute;
    top: 1px;
    transform: rotate(45deg) scaleY(0);
    width: 3px;
    transition: transform .15s ease-in 50ms;
    transform-origin: center;
  }
  :deep(.el-checkbox__input.is-indeterminate .el-checkbox__inner::before){
    content: "";
    position: absolute;
    display: block;
    background-color: black;
    height: 2px;
    transform: scale(.5);
    left: 0;
    right: 0;
    top: 5px;
  }
  :deep(.el-date-editor .el-range__icon){
    display: none;
  }
  :deep(.el-input.is-disabled .el-input__wrapper){
    background-color: transparent;
    box-shadow: 0 0 0 1px #06283e inset;
  }
  :deep(.el-input.is-disabled .el-input__inner){
    -webkit-text-fill-color: #78DFFF;
  }
  :deep(.el-date-editor .el-range-input){
    color: #78DFFF;
  }
  :deep(.el-date-editor .el-range-separator){
    color: #78DFFF;
  }
  :deep(.el-input__prefix){
    display: none;
  }
  //滚动条样式
  ::-webkit-scrollbar{
    width: 0px!important;
  }
  // 表格样式
  :deep(.el-table),
  :deep(.el-table__expanded-cell) {
    background-color: transparent;
    color: #fff;
  }
  :deep(.el-table th){
    background: rgba(1,128,240,0.1);
    text-align: center;
  }
  :deep(.el-table tr),
  :deep(.el-table td) {
    background-color: transparent;
    border: 0px;
    color: #fff;
    font-size: 14px;
    font-weight: Normal;
    padding: 4px 0;
    text-align: center;
  }
  // 修改高亮当前行颜色
  :deep(.el-table tbody tr:hover > td) {
    background: #063570 !important;
  } 
  //去掉最下面的那一条线 
  .el-table::before {
    height: 0px;
  }
  :deep(.el-table__inner-wrapper::before){
    background-color: transparent;
  } 
  //去掉表头下面的那一条线
  :deep(.el-table th.el-table__cell.is-leaf){
    border-bottom: 0;
  }
  :deep(.el-progress__text){
    color: #FFFFFF;
  }
</style>